@mgdis/mg-components 5.4.0 → 5.6.0

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

@@ -44,39 +44,6 @@ export class MgInputSelect {
   constructor() {
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Option to remove placeholder
-     */
-    this.placeholderHide = false;
-    /**
-     * Option to disable placeholder
-     */
-    this.placeholderDisabled = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--select']);
     /**
      * Handle input event
      */
@@ -118,6 +85,29 @@ export class MgInputSelect {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    this.value = undefined;
+    this.items = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.placeholderHide = false;
+    this.placeholderDisabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = undefined;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--select']);
+    this.errorMessage = undefined;
+    this.options = undefined;
+    this.valueExist = undefined;
+    this.readonlyValue = undefined;
   }
   handleValue(newValue) {
     if (newValue !== null) {
@@ -129,13 +119,17 @@ export class MgInputSelect {
     this.valueChange.emit(newValue);
   }
   validateItems(newValue) {
+    // Empty options
+    if (newValue.length === 0) {
+      this.options = [];
+    }
     // String array
-    if (allItemsAreString(newValue)) {
+    else if (allItemsAreString(newValue)) {
       this.valueExist = newValue.includes(this.value);
       this.options = newValue.map((item) => ({ title: item, value: item }));
     }
     // Object array
-    else if (newValue && newValue.every(item => isOption(item))) {
+    else if (newValue.every(item => isOption(item))) {
       this.valueExist = newValue.map(item => item.value).includes(this.value);
       // Grouped object options
       if (newValue.some(item => item.group !== undefined)) {
@@ -147,7 +141,7 @@ export class MgInputSelect {
       }
     }
     else {
-      throw new Error('<mg-input-select> prop "items" is required and all items must be the same type, string or Option.');
+      throw new Error('<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option.');
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css

@@ -124,7 +124,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +145,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

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

@@ -13,47 +13,6 @@ export class MgInputText {
     this.classHasIcon = 'mg-input--has-icon';
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Input type
-     */
-    this.type = 'text';
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Input max length
-     */
-    this.maxlength = 400;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Define input width
-     */
-    this.mgWidth = 'full';
-    /**
-     * Define if component should display character left
-     */
-    this.displayCharacterLeft = true;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--text']);
     /**
      * Handle input event
      *
@@ -144,6 +103,29 @@ export class MgInputText {
         this.classList.add('mg-input--has-buttons-group-append');
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.type = 'text';
+    this.icon = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.maxlength = 400;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = 'full';
+    this.pattern = undefined;
+    this.patternErrorMessage = undefined;
+    this.tooltip = undefined;
+    this.displayCharacterLeft = true;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--text']);
+    this.errorMessage = undefined;
   }
   handleValue(newValue) {
     this.valueChange.emit(newValue);

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css

@@ -124,7 +124,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +145,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

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

@@ -12,51 +12,6 @@ export class MgInputTextarea {
     this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Input max length
-     */
-    this.maxlength = 4000;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Define input width
-     */
-    this.mgWidth = 'full';
-    /**
-     * Define the number of visible text lines for the control
-     */
-    this.rows = 3;
-    /**
-     * Define if component should display character left
-     */
-    this.displayCharacterLeft = true;
-    /**
-     * Define if input is resizable
-     */
-    this.resizable = 'none';
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--textarea']);
     /**
      * Handle input event
      */
@@ -127,6 +82,29 @@ export class MgInputTextarea {
         throw new Error('<mg-input-textarea> prop "pattern" must be paired with the prop "patternErrorMessage"');
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.maxlength = 4000;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = 'full';
+    this.pattern = undefined;
+    this.patternErrorMessage = undefined;
+    this.rows = 3;
+    this.tooltip = undefined;
+    this.displayCharacterLeft = true;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.resizable = 'none';
+    this.classList = new ClassList(['mg-input--textarea']);
+    this.errorMessage = undefined;
   }
   handleValue(newValue) {
     this.checkValidity();

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

@@ -21,39 +21,6 @@ export class MgInputToggle {
     this.classIsActive = 'mg-input--toggle-is-active';
     this.classOnOff = 'mg-input--toggle-on-off';
     this.classIcon = 'mg-input--toggle-icon';
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if toggle have on/off style
-     */
-    this.isOnOff = false;
-    /**
-     * Define if toggle display icon
-     */
-    this.isIcon = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--toggle']);
-    /**
-     * Checked internal value
-     */
-    this.checked = false;
     /**
      * Change checked value
      *
@@ -78,6 +45,22 @@ export class MgInputToggle {
         slots.forEach(slot => slot.setAttribute('title', slot.textContent));
       }
     };
+    this.value = undefined;
+    this.items = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.isOnOff = false;
+    this.isIcon = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.classList = new ClassList(['mg-input--toggle']);
+    this.options = undefined;
+    this.checked = false;
   }
   handleValue(newValue) {
     // Swich to the right option

package/dist/collection/components/molecules/menu/mg-menu/doc/mg-menu.stories.js

@@ -1,19 +1,27 @@
 import { h } from '@stencil/core';
 import { filterArgs } from '../../../../../../.storybook/utils';
-import { Status } from '../../mg-menu-item/mg-menu-item.conf';
 import { Direction } from '../mg-menu.conf';
+import { Status } from '../../mg-menu-item/mg-menu-item.conf';
 export default {
   component: 'mg-menu',
-  title: 'Beta/menus/mg-menu',
+  title: 'Beta/Menus/mg-menu',
   argTypes: {
     direction: {
       options: [undefined, Direction.HORIZONTAL, Direction.VERTICAL],
       control: { type: 'select' },
     },
+    moreitem: {
+      control: { type: 'object' },
+    },
   },
 };
-const getItemArgs = ({ size, label, direction, status, metadata, icon, badge, content, submenu }) => ({
-  size: size !== undefined ? size : direction === Direction.VERTICAL ? 'medium' : undefined,
+/**
+ * Format item args from given params
+ *
+ * @param {ItemArgType} itemArgs - item arguments
+ * @returns {ItemFormatedArgs} items formated args object
+ */
+const getItemArgs = ({ label, status, metadata, icon, badge, content, submenu }) => ({
   status,
   slot: {
     label,
@@ -24,9 +32,32 @@ const getItemArgs = ({ size, label, direction, status, metadata, icon, badge, co
     submenu,
   },
 });
-const getMenuArgs = (direction, level = 0, isSubmenu = false) => ({
+/**
+ * Render mg-menu-item
+ *
+ * @param {ItemFormatedArgs} args mg-menu-item args
+ * @returns {HTMLElement} rendered mg-menu-item
+ */
+const menuItem = (args) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  return (h("mg-menu-item", Object.assign({}, filterArgs(args)), ((_a = args.slot) === null || _a === void 0 ? void 0 : _a.label) && h("span", { slot: "label" }, (_b = args.slot) === null || _b === void 0 ? void 0 : _b.label), ((_c = args.slot) === null || _c === void 0 ? void 0 : _c.metadata) && h("span", { slot: "metadata" }, (_d = args.slot) === null || _d === void 0 ? void 0 : _d.metadata), ((_e = args.slot) === null || _e === void 0 ? void 0 : _e.icon) && h("mg-icon", { slot: "image", icon: "user" }), ((_f = args.slot) === null || _f === void 0 ? void 0 : _f.badge) && (h("mg-badge", { slot: "information", label: "information", value: "1" }, (_g = args.slot) === null || _g === void 0 ? void 0 : _g.icon)), ((_h = args.slot) === null || _h === void 0 ? void 0 : _h.content) && (h("div", null, h("h3", null, "Demo title"), h("p", null, "some content"))), ((_j = args.slot) === null || _j === void 0 ? void 0 : _j.submenu) && menu(getMenuArgs(Direction.VERTICAL, ((_k = args.slot) === null || _k === void 0 ? void 0 : _k.submenu) - 1, 'medium'))));
+};
+/***********
+ * mg-menu *
+ **********/
+/**
+ * Format menu args from given params
+ *
+ * @param {Direction} direction menu direction
+ * @param {number} level menu level. Default: 0.
+ * @param {MenuSizeType} size menu size. Default: 'regular'
+ * @returns {MenuFormatedArgs} menu formated args object
+ */
+const getMenuArgs = (direction, level = 0, size = 'regular') => ({
   label: 'Batman menu',
   direction,
+  size,
+  moreitem: undefined,
   slot: {
     items: [
       getItemArgs({
@@ -58,16 +89,17 @@ const getMenuArgs = (direction, level = 0, isSubmenu = false) => ({
         icon: true,
         metadata: 'my metadata',
         content: true,
-        size: !isSubmenu && direction === Direction.HORIZONTAL ? 'regular' : undefined,
       }),
     ],
   },
 });
-const menu = args => h("mg-menu", Object.assign({}, filterArgs(args, { direction: Direction.HORIZONTAL })), args.slot.items.map(item => menuItem(item)));
-const menuItem = args => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  return (h("mg-menu-item", Object.assign({}, filterArgs(args)), ((_a = args.slot) === null || _a === void 0 ? void 0 : _a.label) && h("span", { slot: "label" }, (_b = args.slot) === null || _b === void 0 ? void 0 : _b.label), ((_c = args.slot) === null || _c === void 0 ? void 0 : _c.metadata) && h("span", { slot: "metadata" }, (_d = args.slot) === null || _d === void 0 ? void 0 : _d.metadata), ((_e = args.slot) === null || _e === void 0 ? void 0 : _e.icon) && h("mg-icon", { slot: "illustration", icon: "user" }), ((_f = args.slot) === null || _f === void 0 ? void 0 : _f.badge) && (h("mg-badge", { slot: "information", label: "information", value: "1" }, (_g = args.slot) === null || _g === void 0 ? void 0 : _g.icon)), ((_h = args.slot) === null || _h === void 0 ? void 0 : _h.content) && (h("div", null, h("h3", null, "Demo title"), h("p", null, "some content"))), ((_j = args.slot) === null || _j === void 0 ? void 0 : _j.submenu) && menu(getMenuArgs(Direction.VERTICAL, ((_k = args.slot) === null || _k === void 0 ? void 0 : _k.submenu) - 1, true))));
-};
+/**
+ * Render mg-menu
+ *
+ * @param {MenuFormatedArgs} args mg-menu args
+ * @returns {HTMLElement} rendered mg-menu
+ */
+const menu = (args) => (h("mg-menu", Object.assign({}, filterArgs(args, { direction: Direction.HORIZONTAL })), args.slot.items.map(item => menuItem(item))));
 /**
  * Template
  *

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js

@@ -6,3 +6,20 @@ export var Direction;
   Direction["VERTICAL"] = "vertical";
   Direction["HORIZONTAL"] = "horizontal";
 })(Direction || (Direction = {}));
+/**
+ * More item type guard
+ *
+ * @param {unknown} element element to control
+ * @returns {boolean} truthy if element is more-item
+ */
+export const isMoreItem = (element) => {
+  var _a, _b, _c;
+  const item = element;
+  return (item === undefined ||
+    (typeof item === 'object' &&
+      (typeof item.size === 'string' || typeof ((_a = item.mgIcon) === null || _a === void 0 ? void 0 : _a.icon) === 'string' || typeof ((_b = item.slotLabel) === null || _b === void 0 ? void 0 : _b.label) === 'string' || typeof ((_c = item.slotLabel) === null || _c === void 0 ? void 0 : _c.display) === 'boolean')));
+};
+/**
+ * List of all possibles sizes
+ */
+export const sizes = ['regular', 'medium', 'large'];

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

@@ -1,3 +1,30 @@
+/**
+ * A11Y
+ */
+.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;
+  }
+}
 :host {
   display: flex;
   background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));