@mgdis/mg-components 5.11.1 → 5.12.0

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -22,6 +22,9 @@ export class MgInputCheckbox {
     this.hasDisplayedError = false;
     // style
     this.baseClassName = 'mg-input--checkbox';
+    this.multiStart = 5;
+    this.searchStart = 10;
+    this.searchOffset = 10;
     /**
      * Handle input event
      * @param event - input event
@@ -59,6 +62,27 @@ export class MgInputCheckbox {
       this.checkValidity();
       this.setErrorMessage();
     };
+    /**
+     * Handle input search value-change event
+     * @param event - input value-change event
+     */
+    this.handleSearchChange = (event) => {
+      this.searchValue = event.detail;
+    };
+    /**
+     * Handle mg-pagination current page change event
+     * @param event - pagination current page change event
+     */
+    this.handleCurrentPageChange = (event) => {
+      this.currentSearchPage = Number(event.detail);
+    };
+    this.handleMgPopoverDisplayChange = (event) => {
+      // reset search value
+      if (!event.detail) {
+        this.searchValue = '';
+        this.setCurrentSearchPage();
+      }
+    };
     /**
      * get invalid element
      * @returns element
@@ -102,6 +126,17 @@ export class MgInputCheckbox {
      * @returns MgPopover identifier
      */
     this.getMgPopoverIdentifier = () => `${this.identifier}-input-mg-popover`;
+    /**
+     * Manage items to display depending on the search state
+     * @returns items to display
+     */
+    this.getDisplayItems = () => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);
+    /**
+     * Method to get pagination total-page
+     * @param checkboxes - checkboxes to paginate
+     * @returns total page number for pagination
+     */
+    this.getPaginationTotalPages = (checkboxes) => Math.ceil(checkboxes.length / this.searchOffset);
     this.value = undefined;
     this.type = checkboxTypes[0];
     this.identifier = undefined;
@@ -112,6 +147,7 @@ export class MgInputCheckbox {
     this.inputVerticalList = false;
     this.required = false;
     this.readonly = false;
+    this.displaySelectedValues = undefined;
     this.disabled = false;
     this.tooltip = undefined;
     this.helpText = undefined;
@@ -120,6 +156,10 @@ export class MgInputCheckbox {
     this.classCollection = new ClassList([this.baseClassName]);
     this.errorMessage = undefined;
     this.checkboxItems = [];
+    this.displaySearchInput = undefined;
+    this.currentSearchPage = 0;
+    this.searchValue = '';
+    this.searchResults = [];
   }
   validateValue(newValue) {
     if (isCheckboxItems(newValue)) {
@@ -141,12 +181,18 @@ export class MgInputCheckbox {
     }
     else {
       const className = `${this.baseClassName}-multi`;
-      if (newValue === 'multi')
+      if (newValue === 'multi') {
         this.classCollection.add(className);
+        this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();
+      }
       else
         this.classCollection.delete(className);
     }
   }
+  validateDisplaySelectedValues(newValue) {
+    if (newValue !== undefined && this.type !== 'multi')
+      throw new Error('<mg-input-checkbox> prop "displaySelectedValues" can only be used with prop type "multi".');
+  }
   handleValidityChange(newValue, _oldValue, prop) {
     this.inputs.forEach(input => {
       input[prop] = newValue;
@@ -164,6 +210,17 @@ export class MgInputCheckbox {
     else
       this.classCollection.delete(className);
   }
+  validateCheckboxItems(newValue) {
+    if (newValue.length > this.multiStart)
+      this.type = 'multi';
+    if (newValue.length > this.searchStart)
+      this.displaySearchInput = this.type === 'multi';
+  }
+  validateSearchValue(newValue) {
+    this.searchResults = this.checkboxItems.filter(item => item.title.toLocaleLowerCase().includes(newValue.trim().toLocaleLowerCase()));
+    // after each query we reset pagination
+    this.setCurrentSearchPage();
+  }
   /**
    * Public method to display errors
    */
@@ -172,6 +229,31 @@ export class MgInputCheckbox {
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * Reset current-search-page prop
+   */
+  setCurrentSearchPage() {
+    this.currentSearchPage = this.getDisplayItems().length > 0 ? 1 : 0;
+  }
+  /**
+   * Method to get a array range
+   * @param from - array start index
+   * @param to - array end index
+   * @returns array's range
+   */
+  getArrayRange(array, from, to) {
+    return array.slice(from, to);
+  }
+  /**
+   * Get from and to index
+   * @returns [from,to] index
+   */
+  getFromToIndexes() {
+    const isFirstPage = this.currentSearchPage === 1;
+    const checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentSearchPage - 1) * this.searchOffset;
+    const checkboxItemsToIndex = isFirstPage ? this.searchOffset : this.currentSearchPage * this.searchOffset;
+    return [checkboxItemsFromIndex, checkboxItemsToIndex];
+  }
   /*************
    * Lifecycle *
    *************/
@@ -182,12 +264,12 @@ export class MgInputCheckbox {
   componentWillLoad() {
     // Get locales
     this.messages = initLocales(this.element).messages;
-    if (this.type === 'multi')
-      this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();
     // Validate
+    this.validateType(this.type);
     this.validateValue(this.value);
     this.validateDisabled(this.disabled);
-    this.validateType(this.type);
+    this.validateDisplaySelectedValues(this.displaySelectedValues);
+    this.setCurrentSearchPage();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -195,30 +277,60 @@ export class MgInputCheckbox {
       this.checkValidity();
     }, 0);
   }
+  /**
+   * Render checkbox multi display values
+   * @param selectedValuesNb - selected values length
+   * @returns display selected values
+   */
+  renderCheckboxMultiDisplaySelectedValues(selectedValuesNb) {
+    if (this.displaySelectedValues) {
+      return (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-input__input-checkbox-multi-values-container" }, this.checkboxItems
+        .filter(({ value }) => value)
+        .map(({ title }) => (h("li", { class: "mg-input__input-checkbox-multi-value", key: title }, title))))));
+    }
+    else {
+      return h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb));
+    }
+  }
+  /**
+   * Render paginated checkboxes
+   * @param checkboxes - checkboxes to render
+   * @returns paginated checkboxes
+   */
+  renderPaginatedCheckboxes(checkboxes) {
+    const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();
+    return [
+      this.renderCheckboxes(this.getArrayRange(checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex)),
+      h("mg-pagination", { key: "search-pagination", totalPages: this.getPaginationTotalPages(checkboxes), currentPage: this.currentSearchPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, identifier: `${this.identifier}-pagination` }),
+    ];
+  }
   /**
    * render checkbox multi element
    * @returns html element
    */
   renderCheckboxMulti() {
     const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
-    return (h("div", { class: "mg-input__input-container mg-input__input-checkbox-multi" }, h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), ref: el => {
+    const checkboxes = this.getDisplayItems();
+    return (h("div", { class: { 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: el => {
         if (Boolean(el))
           this.mgPopover = el;
-      } }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.renderCheckboxes()))));
+      } }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.displaySearchInput && [
+      h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true, displayCharacterLeft: false, name: "q", "onValue-change": this.handleSearchChange, "aria-controls": "search-results items-list" }),
+      h("p", { key: "search-results", role: "status", class: "sr-only", id: "search-results" }, `${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`),
+    ], this.displaySearchInput && this.getPaginationTotalPages(checkboxes) > 1 ? this.renderPaginatedCheckboxes(checkboxes) : this.renderCheckboxes(checkboxes), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-input__input-checkbox-multi-no-result" }, this.messages.input.checkbox.noResult)))));
   }
   /**
    * Render checkbox element
+   * @param checkboxes - checkboxes to render
    * @returns HTML Element
    */
-  renderCheckboxes() {
+  renderCheckboxes(checkboxes) {
     return (h("ul", { class: {
         'mg-input__input-group-container': true,
         'mg-input__input-group-container--vertical': this.inputVerticalList || (this.type === 'multi' && !this.readonly),
         'mg-input__input-checkbox-multi-inputs': this.type === 'multi' && !this.readonly,
-      }, role: "list" }, this.checkboxItems
-      .filter(item => {
-      return !this.readonly || item.value;
-    })
+      }, role: "list", "aria-describedby": this.displaySearchInput ? 'search-results' : false, "aria-label": this.displaySearchInput ? this.messages.input.checkbox.searchResults : false, "aria-live": this.displaySearchInput ? 'polite' : false, id: "items-list", key: "checkboxes" }, checkboxes
+      .filter(item => !this.readonly || item.value)
       .map((input, index) => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeydown, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
@@ -229,7 +341,7 @@ export class MgInputCheckbox {
    * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? this.renderCheckboxes() : this.renderCheckboxMulti()));
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? this.renderCheckboxes(this.checkboxItems) : this.renderCheckboxMulti()));
   }
   static get is() { return "mg-input-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -267,7 +379,7 @@ export class MgInputCheckbox {
       },
       "type": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "CheckboxType",
           "resolved": "\"checkbox\" | \"multi\"",
@@ -429,6 +541,23 @@ export class MgInputCheckbox {
         "reflect": false,
         "defaultValue": "false"
       },
+      "displaySelectedValues": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display selected values list in \"multi\" type"
+        },
+        "attribute": "display-selected-values",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -521,7 +650,11 @@ export class MgInputCheckbox {
     return {
       "classCollection": {},
       "errorMessage": {},
-      "checkboxItems": {}
+      "checkboxItems": {},
+      "displaySearchInput": {},
+      "currentSearchPage": {},
+      "searchValue": {},
+      "searchResults": {}
     };
   }
   static get events() {
@@ -593,6 +726,9 @@ export class MgInputCheckbox {
       }, {
         "propName": "type",
         "methodName": "validateType"
+      }, {
+        "propName": "displaySelectedValues",
+        "methodName": "validateDisplaySelectedValues"
       }, {
         "propName": "required",
         "methodName": "handleValidityChange"
@@ -605,6 +741,12 @@ export class MgInputCheckbox {
       }, {
         "propName": "disabled",
         "methodName": "validateDisabled"
+      }, {
+        "propName": "checkboxItems",
+        "methodName": "validateCheckboxItems"
+      }, {
+        "propName": "searchValue",
+        "methodName": "validateSearchValue"
       }];
   }
 }

package/dist/collection/components/molecules/mg-details/mg-details.css

@@ -25,12 +25,14 @@
     transition: none !important;
   }
 }
+.mg-details {
+  container: mg-details/inline-size;
+}
 .mg-details summary {
   display: flex;
   align-items: baseline;
   cursor: pointer;
 }
-
 .mg-details__toggle {
   margin-left: 1.5rem;
   flex-shrink: 0;
@@ -40,7 +42,22 @@
   gap: 0.6rem;
   min-height: calc(var(--font-size) * var(--line-height));
 }
-
 .mg-details__details {
-  margin-top: 1.5rem;
+  margin-top: var(--mg-details-spacing);
+}
+
+@container mg-details (max-width: 60rem) {
+  .mg-details__toggle span {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
 }

package/dist/collection/locales/en/messages.json

@@ -23,7 +23,12 @@
       "selectedValue": "{nb} selected value",
       "editButton": "Edit",
       "selectButton": "Select values",
-      "showButton": "Show"
+      "showButton": "Show",
+      "label": "Enter a value",
+      "result": "result",
+      "results": "results",
+      "searchResults": "Search result(s) list.",
+      "noResult": "No result."
     }
   },
   "form": {

package/dist/collection/locales/fr/messages.json

@@ -23,7 +23,12 @@
       "selectedValue": "{nb} valeur selectionnée",
       "editButton": "Modifier",
       "selectButton": "Sélectionner des valeurs",
-      "showButton": "Voir"
+      "showButton": "Voir",
+      "label": "Saisissez une valeur",
+      "result": "resultat",
+      "results": "resultats",
+      "searchResults": "List de resultat(s) de la recherche.",
+      "noResult": "Aucun resultat."
     }
   },
   "form": {

package/dist/collection/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/collection/styles/typography.scss

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

package/dist/collection/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/components/index2.js

@@ -22,7 +22,12 @@ const input$1 = {
 		selectedValue: "{nb} selected value",
 		editButton: "Edit",
 		selectButton: "Select values",
-		showButton: "Show"
+		showButton: "Show",
+		label: "Enter a value",
+		result: "result",
+		results: "results",
+		searchResults: "Search result(s) list.",
+		noResult: "No result."
 	}
 };
 const form$1 = {
@@ -104,7 +109,12 @@ const input = {
 		selectedValue: "{nb} valeur selectionnée",
 		editButton: "Modifier",
 		selectButton: "Sélectionner des valeurs",
-		showButton: "Voir"
+		showButton: "Voir",
+		label: "Saisissez une valeur",
+		result: "resultat",
+		results: "resultats",
+		searchResults: "List de resultat(s) de la recherche.",
+		noResult: "Aucun resultat."
 	}
 };
 const form = {

package/dist/components/mg-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgDetailsCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__details{margin-top:1.5rem}";
+const mgDetailsCss = "/**\n * A11Y\n */\n.sr-only {\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n}\n\n*:focus:not(:focus-visible) {\n  outline: none;\n}\n\n@media (prefers-reduced-motion) {\n  .mg-a11y-animation {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n.mg-details {\n  container: mg-details/inline-size;\n}\n.mg-details summary {\n  display: flex;\n  align-items: baseline;\n  cursor: pointer;\n}\n.mg-details__toggle {\n  margin-left: 1.5rem;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  gap: 0.6rem;\n  min-height: calc(var(--font-size) * var(--line-height));\n}\n.mg-details__details {\n  margin-top: var(--mg-details-spacing);\n}\n\n@container mg-details (max-width: 60rem) {\n  .mg-details__toggle span {\n    border: 0 !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    -webkit-clip-path: inset(50%) !important;\n    clip-path: inset(50%) !important;\n    height: 1px !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    width: 1px !important;\n    white-space: nowrap !important;\n  }\n}";
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {