npm - @mgdis/mg-components - Versions diffs - 5.29.0 → 6.0.0 - Mend

@mgdis/mg-components 5.29.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (332) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-textarea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAoC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,OAAO,eAAe;;QAC1B;;sBAEc;QAEd,UAAU;QACO,eAAU,GAAG,iBAAiB,CAAC;QAC/B,iCAA4B,GAAG,wCAAwC,CAAC;QAWzF,8CAA8C;QACtC,sBAAiB,GAAG,KAAK,CAAC;QAiPlC;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAChC,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC1C,IAAI,CAAC,eAAe,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACrE,CAAC,CAAC;QAEF;;WAEG;QACK,eAAU,GAAG,GAAS,EAAE;YAC9B,eAAe;YACf,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACnE,gBAAgB;YAChB,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;YACtC,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;gBAC/B,cAAc;gBACd,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;;WAIG;QACK,uBAAkB,GAAG,GAAY,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhI;;WAEG;QACK,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC;QAChH,CAAC,CAAC;QAEF;;;WAGG;QACK,oBAAe,GAAG,CAAC,YAAqB,EAAQ,EAAE;YACxD,oBAAoB;YACpB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,yBAAyB;YACzB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;oBAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;gBACnC,CAAC;qBAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAAC;oBACtC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC;gBAC/C,CAAC;gBACD,WAAW;qBACN,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC;oBAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;gBACpD,CAAC;YACH,CAAC;QACH,CAAC,CAAC;;;oBArRqB,IAAI,CAAC,UAAU;;;yBAelB,KAAK;;yBAWL,IAAI;wBAKL,KAAK;wBAKL,KAAK;wBAUL,KAAK;uBAwBC,MAAM;;;oBAiChB,CAAC;;+BAU2B,OAAO;oCAKnB,IAAI;;;;yBA4B8B,MAAM;+BAKjC,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;;IArK7E,WAAW,CAAC,QAAgB;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAiDD,aAAa,CAAC,QAAqC;QACjD,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IASD,oBAAoB,CAAC,QAAiB,EAAE,SAAkB,EAAE,IAAY;QACtE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC;YAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YACjC,CAAC;QACH,CAAC;IACH,CAAC;IAGD,gBAAgB,CAAC,QAAqC;QACpD,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAOD,YAAY,CAAC,QAAoC;QAC/C,oBAAoB;QACpB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,qBAAqB,KAAK,EAAE,CAAC,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,kBAAkB;QAClB,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAC9E,CAAC;IAcD,eAAe,CAAC,QAAgB;QAC9B,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC;YACxG,MAAM,IAAI,KAAK,CAAC,oGAAoG,CAAC,CAAC;QACxH,CAAC;IACH,CAAC;IAsBD,4BAA4B,CAAC,QAAiB;QAC5C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC9D,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;IA0CD;;OAEG;IAEH,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;IACxC,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,CAAC,QAAQ,CAAC,KAA+B,EAAE,YAAoB;QAClE,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;QAC7F,CAAC;aAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,MAAM,IAAI,KAAK,CAAC,+EAA+E,CAAC,CAAC;QACnG,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;QACxC,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,WAAW,CAAC,QAAkC;QACpD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3B,2DAA2D;QAC3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1J,CAAC;IAsED;;mBAEe;IAEf;;;OAGG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QACnD,IAAI,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,UAAU,iBAAiB,CAAC;QAC3D,WAAW;QACX,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAErC,yCAAyC;QACzC,iEAAiE;QACjE,mEAAmE;QACnE,OAAO,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,iEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAClC,kBAAkB,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,EAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,KAAK,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY;YAE/B,4DAAK,KAAK,EAAC,iCAAiC;gBAC1C,iEACE,KAAK,EAAE;wBACL,iBAAiB,EAAE,IAAI;wBACvB,wBAAwB,EAAE,IAAI;wBAC9B,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;wBACvD,uCAAuC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;wBACxE,qCAAqC,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;qBACrE,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,QAAQ,EAAE,EAChD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,GAAG,EAAE,CAAC,EAAuB,EAAE,EAAE;wBAC/B,IAAI,EAAE,KAAK,IAAI;4BAAE,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;oBACnC,CAAC,GACS;gBACX,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAClD,0EAAmB,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,GAAsB,CAC7H,CACG,CACG,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { type TooltipPosition, type Width, Handler, widths, classReadonly, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-textarea',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n shadow: true,\n})\nexport class MgInputTextarea {\n /***********\n Internal \n *********/\n\n // Classes\n private readonly classFocus = 'mg-u-is-focused';\n private readonly classHasDisplayCharacterLeft = 'mg-c-input--has-display-character-left';\n\n // IDs\n private characterLeftId;\n\n // HTML selector\n private input: HTMLTextAreaElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextareaElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.checkValidity();\n this.valueChange.emit(newValue);\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder?: string;\n\n /\n Input max length\n /\n @Prop() maxlength = 4000;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputTextarea['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n validateDisabled(newValue: MgInputTextarea['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n @Watch('mgWidth')\n watchMgWidth(newValue: MgInputTextarea['mgWidth']): void {\n // reset width class\n widths.forEach(width => {\n this.classCollection.delete(`mg-c-input--width-${width}`);\n });\n\n // apply new width\n if (newValue) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n }\n\n /\n Define input pattern to validate\n * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n /\n @Prop() pattern?: string;\n\n /\n Define input pattern error message\n /\n @Prop() patternErrorMessage?: string;\n @Watch('pattern')\n @Watch('patternErrorMessage')\n validatePattern(newValue: string): void {\n if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n throw new Error('<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n }\n }\n\n /\n Define the number of visible text lines for the control\n /\n @Prop() rows = 3;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Define if component should display character left\n /\n @Prop() displayCharacterLeft = true;\n @Watch('displayCharacterLeft')\n validateDisplayCharacterLeft(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(this.classHasDisplayCharacterLeft);\n } else {\n this.classCollection.delete(this.classHasDisplayCharacterLeft);\n }\n }\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText?: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Define if input is resizable\n /\n @Prop() resizable: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'none';\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextareaElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextareaElement['valid']>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputTextarea['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined \|\| (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n /\n Handle input event\n /\n private handleInput = (): void => {\n if (this.hasDisplayedError) {\n this.checkValidity();\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.classCollection.add(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n // Manage focus\n this.classCollection.delete(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n // Display Error\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Get pattern validity\n * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n * @returns is pattern valid\n /\n private getPatternValidity = (): boolean => this.pattern === undefined \|\| new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input.checkValidity() && this.getPatternValidity()));\n };\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does not match pattern\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (!this.getPatternValidity()) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.characterLeftId = `${this.identifier}-character-left`;\n // Validate\n this.validateDisplayCharacterLeft(this.displayCharacterLeft);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n this.watchMgWidth(this.mgWidth);\n this.watchReadonly(this.readonly);\n this.validateDisabled(this.disabled);\n\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[this.characterLeftId]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonlyValue={this.value}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n <div class=\"mg-c-input__with-character-left\">\n <textarea\n class={{\n 'mg-c-input__box': true,\n 'mg-c-input__box--width': true,\n 'mg-c-input__box--resizable': this.resizable === 'both',\n 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n }}\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n rows={this.rows}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLTextAreaElement) => {\n if (el !== null) this.input = el;\n }}\n ></textarea>\n {this.displayCharacterLeft && this.maxlength > 0 && (\n <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n )}\n </div>\n </mg-input>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-textarea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { type TooltipPosition, type Width, type EventType, widths, classReadonly, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-textarea',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n shadow: true,\n})\nexport class MgInputTextarea {\n /***********\n Internal \n *********/\n\n // Classes\n private readonly classFocus = 'mg-u-is-focused';\n private readonly classDisplayCharacterLeft = 'mg-c-input--display-character-left';\n\n // IDs\n private characterLeftId;\n\n // HTML selector\n private input: HTMLTextAreaElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: EventType;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextareaElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.checkValidity();\n this.valueChange.emit(newValue);\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder?: string;\n\n /\n Input max length\n /\n @Prop() maxlength = 4000;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputTextarea['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n validateDisabled(newValue: MgInputTextarea['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n @Watch('mgWidth')\n watchMgWidth(newValue: MgInputTextarea['mgWidth']): void {\n // reset width class\n widths.forEach(width => {\n this.classCollection.delete(`mg-c-input--width-${width}`);\n });\n\n // apply new width\n if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n }\n\n /\n Define input pattern to validate\n * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n /\n @Prop() pattern?: string;\n\n /\n Define input pattern error message\n /\n @Prop() patternErrorMessage?: string;\n @Watch('pattern')\n @Watch('patternErrorMessage')\n validatePattern(newValue: string): void {\n if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n throw new Error(\n `<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired. Passed value: \"pattern='${toString(this.pattern)}'\" and \"patternErrorMessage='${toString(this.patternErrorMessage)}'\".`,\n );\n }\n }\n\n /\n Define the number of visible text lines for the control\n /\n @Prop() rows = 3;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Define if component should display character left\n /\n @Prop() characterLeftHide = false;\n @Watch('characterLeftHide')\n validatecharacterLeftHide(newValue: boolean): void {\n if (newValue) {\n this.classCollection.delete(this.classDisplayCharacterLeft);\n } else {\n this.classCollection.add(this.classDisplayCharacterLeft);\n }\n }\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText?: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Define if input is resizable\n /\n @Prop() resizable: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'none';\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextareaElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextareaElement['valid']>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputTextarea['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined \|\| (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n /\n Handle input event\n /\n private handleInput = (): void => {\n if (this.hasDisplayedError) {\n this.checkValidity();\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.classCollection.add(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n // Manage focus\n this.classCollection.delete(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n // Display Error\n this.handlerInProgress = 'blur';\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Get pattern validity\n * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n * @returns is pattern valid\n /\n private getPatternValidity = (): boolean => this.pattern === undefined \|\| new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input.checkValidity() && this.getPatternValidity()));\n };\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does not match pattern\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (!this.getPatternValidity()) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.characterLeftId = `${this.identifier}-character-left`;\n // Validate\n this.validatecharacterLeftHide(this.characterLeftHide);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n this.watchMgWidth(this.mgWidth);\n this.watchReadonly(this.readonly);\n this.validateDisabled(this.disabled);\n\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[this.characterLeftId]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n tooltip={this.tooltip}\n tooltipPosition={this.readonly && this.value === undefined ? 'label' : this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n this.value && <b class=\"mg-c-input__readonly-value\">{this.value}</b>\n ) : (\n <div class=\"mg-c-input__with-character-left\">\n <textarea\n class={{\n 'mg-c-input__box': true,\n 'mg-c-input__box--width': true,\n 'mg-c-input__box--resizable': this.resizable === 'both',\n 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n }}\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n rows={this.rows}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLTextAreaElement) => {\n if (el !== null) this.input = el;\n }}\n ></textarea>\n {!this.characterLeftHide && this.maxlength > 0 && (\n <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n )}\n </div>\n )}\n </mg-input>\n );\n }\n}\n"]}

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h } from "@stencil/core";
-import { ClassList, allItemsAreString, isValidString } from "@mgdis/stencil-helpers";
+import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/stencil-helpers";
 import { classDisabled, classReadonly } from "../mg-input/mg-input.conf";
 /**
  * type Option validation function
@@ -96,7 +96,7 @@ export class MgInputToggle {
     }
     validateItems(newValue) {
         if (typeof newValue === 'object' && this.items.length !== 2) {
-            throw new Error('<mg-input-toggle> prop "items" require 2 items.');
+            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
         }
         // String array
         else if (allItemsAreString(newValue)) {
@@ -107,7 +107,7 @@ export class MgInputToggle {
             this.options = newValue;
         }
         else {
-            throw new Error('<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue.');
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -153,10 +153,10 @@ export class MgInputToggle {
      */
     async setError(valid, errorMessage) {
         if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
+            throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
         }
         else if (!isValidString(errorMessage)) {
-            throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
+            throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
             this.valid = valid;
@@ -210,8 +210,8 @@ export class MgInputToggle {
      * @returns HTML Element
      */
     render() {
-        var _a;
-        return (h("mg-input", { key: '8d4b88c7a14660ee3cfc69c3fce7f35f41b8a199', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonlyValue: (_a = this.getCheckedItem(this.checked)) === null || _a === void 0 ? void 0 : _a.title, tooltip: !this.readonly && this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, h("button", { key: '9af8b4159d4159894b9c37867cd5581296c48295', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { key: '7b11e8151dc231718c81c73f7d99980eec4bb1ed', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: '7efaeced52095c79b2d61f9b3628ec2f605d747b', name: "item-1" })), h("span", { key: 'd2e3775fbae5c6c679125ac99c56dfde431ecdc2', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'edbb817680e42f7012f5b8d69e1c47626d97a161', name: "item-2" })))));
+        const checkedItem = this.getCheckedItem(this.checked);
+        return (h("mg-input", { key: '803566335b26e4cf70cbb4cb397db4c9688314de', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
     }
     static get is() { return "mg-input-toggle"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-toggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: unknown): option is ToggleValue =>\n typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/\n @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n /\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classIsActive = 'mg-c-input--toggle-is-active';\n private readonly classOnOff = 'mg-c-input--toggle-on-off';\n private readonly classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: MgInputToggle['items']): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue)) {\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (Array.isArray(newValue) && newValue.every(isOption)) {\n this.options = newValue;\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputToggle['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgInputToggle['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText?: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define input valid state\n /\n @State() valid: boolean;\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: MgInputToggle['checked']): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.getCheckedItem(newValue).value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n Get checked item\n * @param checked - checked item\n * @returns toggle value\n /\n private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n if (this.options?.length === 2) {\n return this.options[checked ? 1 : 0];\n } else {\n return null;\n }\n };\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.watchIsIcon(this.isIcon);\n this.watchIsOnOff(this.isOnOff);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n helpText={this.helpText}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonlyValue={this.getCheckedItem(this.checked)?.title}\n tooltip={!this.readonly && this.tooltip}\n tooltipPosition={this.tooltipPosition}\n errorMessage={this.errorMessage}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n </mg-input>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-toggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: unknown): option is ToggleValue =>\n typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/\n @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n /\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classIsActive = 'mg-c-input--toggle-is-active';\n private readonly classOnOff = 'mg-c-input--toggle-on-off';\n private readonly classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: MgInputToggle['items']): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error(`<mg-input-toggle> prop \"items\" require 2 items. Passed value: ${toString(newValue)}.`);\n }\n // String array\n else if (allItemsAreString(newValue)) {\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (Array.isArray(newValue) && newValue.every(isOption)) {\n this.options = newValue;\n } else {\n throw new Error(`<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputToggle['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgInputToggle['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText?: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define input valid state\n /\n @State() valid: boolean;\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: MgInputToggle['checked']): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.getCheckedItem(newValue).value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n Get checked item\n * @param checked - checked item\n * @returns toggle value\n /\n private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n if (this.options?.length === 2) {\n return this.options[checked ? 1 : 0];\n } else {\n return null;\n }\n };\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.watchIsIcon(this.isIcon);\n this.watchIsOnOff(this.isOnOff);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const checkedItem = this.getCheckedItem(this.checked);\n return (\n <mg-input\n label={this.label}\n helpText={this.helpText}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\n ) : (\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n )}\n </mg-input>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.conf.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-item-more.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import type { MgMenu } from '../../menu/mg-menu/mg-menu';\nimport type { MgIcon } from '../../../atoms/mg-icon/mg-icon';\n\n/**\n * SlotLabel prop type\n */\nexport type SlotLabelType = {\n label?: string;\n display?: boolean;\n};\n\n/**\n * icon prop type\n */\nexport type IconType = Pick<MgIcon, 'icon'>;\n\n/**\n * size type\n */\nexport type SizeType = MgMenu['size'];\n"]}

package/dist/collection/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.js RENAMED Viewed

@@ -1,8 +1,11 @@
 import { h, Host } from "@stencil/core";
-import { isValidString, nextTick } from "@mgdis/stencil-helpers";
-import { Direction, sizes } from "../menu/mg-menu/mg-menu.conf";
-import { OverflowBehavior } from "../../../utils/behaviors.utils";
-import { initLocales } from "../../../locales";
+import { isValidString, nextTick, toString } from "@mgdis/stencil-helpers";
+import { OverflowBehavior } from "../../../../utils/behaviors.utils";
+import { Direction, sizes } from "../../menu/mg-menu/mg-menu.conf";
+import { initLocales } from "../../../../locales";
+/**
+ * @internal
+ */
 export class MgItemMore {
     constructor() {
         /************
@@ -15,7 +18,7 @@ export class MgItemMore {
          */
         this.setProxyElement = (proxified) => {
             const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
-            if (!proxy)
+            if (proxy === null)
                 return;
             // remove proxy id to prevent duplicate key. default html id is: '';
             if (isValidString(proxy.id))
@@ -63,7 +66,7 @@ export class MgItemMore {
                 this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
                 // we need to get all `mg-menu-item` linked to the cloned one to set mirror process
                 nextTick(() => {
-                    if (child.querySelector('mg-menu')) {
+                    if (child.querySelector('mg-menu') !== null) {
                         child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
                     }
                     else {
@@ -80,17 +83,17 @@ export class MgItemMore {
     }
     validateIcon(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${toString(newValue)}.`);
     }
     validateSlotLabel(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${toString(newValue)}.`);
         else if (typeof newValue.label !== 'string')
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
         if (newValue && !sizes.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -120,7 +123,7 @@ export class MgItemMore {
      * Set OverflowBehavior when parentMenu state is upate AND defined
      */
     componentDidUpdate() {
-        if (this.parentMenu && !this.overflowBehavior) {
+        if (this.parentMenu && this.overflowBehavior === undefined) {
             this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
             this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
         }
@@ -137,21 +140,22 @@ export class MgItemMore {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '59f6d600c0f703f6709eecc06dddeeb7a91777b4', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '706ffaaece681c27316f5d11fb0d4916c3643573', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
-                if (el)
+        return (h(Host, { key: '57dda64ff7dcb6dbf50bcd1e887fd6fb7733d533', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: 'b975001df7dfeae4ea14b3e208245240e9868ae4', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
+                if (el !== null) {
                     this.moreElementMenuItem = el;
-            } }, h("mg-icon", { key: 'c93e9a5bea9ff91ab7de89cd555151646859877c', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: 'cb93e7db75f6e1c5daacc17cb90ac65fad938b8b', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '65c382793eef9f113236a6df756dc535f3732f8c', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+                }
+            } }, h("mg-icon", { key: 'f0837050757fe920e71c6060e4fb873c8bab43b7', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '7155b47f84cc2193dec65bcccbbaa93776e5daa1', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '9295f68e1799a313cc93cdbf6bd75cea3aa1ecd0', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
     }
     static get is() { return "mg-item-more"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css"]
         };
     }
     static get properties() {
@@ -161,12 +165,12 @@ export class MgItemMore {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "{ icon: \"filter\" | \"copy\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-slash\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-slash\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"question-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tags\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
+                    "resolved": "{ icon: \"filter\" | \"copy\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-slash\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-slash\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tags\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
                     "references": {
                         "IconType": {
                             "location": "import",
                             "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::IconType"
+                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::IconType"
                         }
                     }
                 },
@@ -188,7 +192,7 @@ export class MgItemMore {
                         "SlotLabelType": {
                             "location": "import",
                             "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SlotLabelType"
+                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SlotLabelType"
                         }
                     }
                 },
@@ -205,12 +209,12 @@ export class MgItemMore {
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
-                    "resolved": "\"large\" | \"medium\" | \"regular\"",
+                    "resolved": "\"large\" | \"medium\" | \"xlarge\"",
                     "references": {
                         "SizeType": {
                             "location": "import",
                             "path": "./mg-item-more.conf",
-                            "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SizeType"
+                            "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SizeType"
                         }
                     }
                 },

package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../../src/components/molecules/internals/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { OverflowBehavior } from '../../../../utils/behaviors.utils';\nimport { Direction, sizes } from '../../menu/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n tag: 'mg-item-more',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n shadow: true,\n})\nexport class MgItemMore {\n /************\n * Internal *\n ************/\n private readonly name = 'mg-item-more';\n private messages: MessageType;\n private parentMenuItems: HTMLMgMenuItemElement[];\n private moreElementMenuItem: HTMLMgMenuItemElement;\n private overflowBehavior: OverflowBehavior;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgItemMoreElement;\n\n /**\n * Define icon\n */\n @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n @Watch('icon')\n validateIcon(newValue: MgItemMore['icon']): void {\n if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Define slot label element\n */\n @Prop() slotlabel?: SlotLabelType = { display: false };\n @Watch('slotlabel')\n validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type. Passed value: ${toString(newValue)}.`);\n else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n }\n\n /**\n * Define component child menu size.\n */\n @Prop() size?: SizeType;\n @Watch('size')\n validateSize(newValue: MgItemMore['size']): void {\n if (newValue && !sizes.includes(newValue)) throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Define component parent menu.\n */\n @State() parentMenu: HTMLMgMenuElement;\n\n /**\n * Set proxy element properties and listeners\n * @param proxified - element to proxify from\n */\n private setProxyElement = (proxified: HTMLMgMenuItemElement): void => {\n const proxy: HTMLMgMenuItemElement = this.moreElementMenuItem.querySelector(`[identifier=\"${proxified.identifier}\"]`);\n if (proxy === null) return;\n\n // remove proxy id to prevent duplicate key. default html id is: '';\n if (isValidString(proxy.id)) proxy.id = '';\n\n const proxyClickHandler = (): void => {\n this.parentMenu\n .querySelector(`[identifier=\"${proxy.identifier}\"]`)\n .shadowRoot.querySelector('a, button')\n .dispatchEvent(new MouseEvent('click', { bubbles: true }));\n };\n\n // Watch the `item-updated` event to keep element needeed properties and innerHTML in sync between the proxified and the proxy elements\n const updateProxy = (element: HTMLMgMenuItemElement): void => {\n for (const key in element) {\n if (['identifier', 'href', 'targer', 'status', 'expanded'].includes(key)) element[key] ? proxy.setAttribute(key, element[key]) : proxy.removeAttribute(key);\n }\n\n proxy.innerHTML = element.innerHTML;\n // When `href` is updated we need to wait the full component re-render before update its handler\n setTimeout(() => {\n const interactiveElement = proxy.shadowRoot.querySelector('a, button');\n interactiveElement.removeEventListener('click', proxyClickHandler);\n interactiveElement.addEventListener('click', proxyClickHandler);\n });\n };\n\n updateProxy(proxified);\n\n proxified.addEventListener('item-updated', event => {\n updateProxy(event.target);\n });\n\n // update click event listener on proxy item and mirror the event on the main menu element\n // we need to wait mg-menu-item to be loaded to ensure the shadowroot is rendered\n proxy.addEventListener('item-loaded', () => {\n updateProxy(proxified);\n });\n };\n\n /***********\n * Methods *\n ***********/\n\n /**\n * render mg-item-more overflow element\n * @returns mg-item-more element\n */\n private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n // create item-more menu items element from main menu-items clones\n this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n\n // we need to get all `mg-menu-item` linked to the cloned one to set mirror process\n nextTick(() => {\n if (child.querySelector('mg-menu') !== null) {\n child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);\n } else {\n this.setProxyElement(child);\n }\n });\n });\n\n return this.element;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Set variables and validate props\n */\n componentWillLoad(): void {\n // init variables\n this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n // validate props\n this.validateIcon(this.icon);\n this.validateSlotLabel(this.slotlabel);\n this.validateSize(this.size);\n }\n\n /**\n * Ensure parent DOM is fully rendered with timeout method before parse elements\n * @returns timeout\n */\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // ensure parent menu is fully rendered\n return setTimeout(() => {\n this.parentMenu = this.element.closest('mg-menu');\n });\n }\n\n /**\n * Set OverflowBehavior when parentMenu state is upate AND defined\n */\n componentDidUpdate(): void {\n if (this.parentMenu && this.overflowBehavior === undefined) {\n this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n }\n }\n\n /**\n * Disconnect overflow ResizeObserver\n */\n disconnectedCallback(): void {\n this.overflowBehavior?.disconnect();\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"listitem\">\n {this.parentMenu && (\n <mg-menu-item\n data-overflow-more\n data-size={this.parentMenu.size}\n identifier=\"mg-item-more\"\n ref={el => {\n if (el !== null) {\n this.moreElementMenuItem = el;\n }\n }}\n >\n <mg-icon icon={this.icon.icon} size={this.size} slot=\"image\"></mg-icon>\n <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n {this.slotlabel.label}\n </span>\n <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n </mg-menu-item>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -1,13 +1,12 @@
 /**
- * Menu direction type
+ * Menu direction values
  */
-export var Direction;
-(function (Direction) {
-    Direction["VERTICAL"] = "vertical";
-    Direction["HORIZONTAL"] = "horizontal";
-})(Direction || (Direction = {}));
+export const Direction = {
+    VERTICAL: 'vertical',
+    HORIZONTAL: 'horizontal',
+};
 /**
  * List of all possibles sizes
  */
-export const sizes = ['regular', 'medium', 'large'];
+export const sizes = ['medium', 'large', 'xlarge'];
 //# sourceMappingURL=mg-menu.conf.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-menu.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"names":[],"mappings":"~~AAEA~~;;GAEG;AACH,MAAM,~~CAAN~~,~~IAAY~~,~~SAGX~~;~~AAHD~~,~~WAAY~~,~~SAAS~~;~~IACnB~~,~~kCAAqB~~,~~CAAA;IACrB~~,~~sCAAyB,CAAA~~;~~AAC3B~~,CAAC~~,EAHW,SAAS,KAAT,SAAS,QAGpB~~;~~AAOD~~;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,~~SAAS~~,EAAE,~~QAAQ~~,EAAE,~~OAAO~~,CAAU,CAAC","sourcesContent":["import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/*\n Menu direction type\n /\nexport ~~enum~~ Direction {\n VERTICAL = 'vertical',\n HORIZONTAL = 'horizontal',\n}\n\n/\n ItemMore prop type\n /\nexport type ItemMoreType = Pick<MgItemMore, 'icon' \| 'slotlabel' \| 'size'>;\n\n/\n List of all possibles sizes\n /\nexport const sizes = ['~~regular~~', '~~medium~~', '~~large~~'] as const;\n\n/\n item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"]}
1	+ {"version":3,"file":"mg-menu.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAkC;IACtD,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,YAAY;CACzB,CAAC;AAOF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC","sourcesContent":["import type { Size } from '../../../../types';\nimport type { MgItemMore } from '../../internals/mg-item-more/mg-item-more';\n\n/*\n Menu direction type\n /\nexport type DirectionType = 'vertical' \| 'horizontal';\n\n/\n Menu direction values\n /\nexport const Direction: Record<string, DirectionType> = {\n VERTICAL: 'vertical',\n HORIZONTAL: 'horizontal',\n};\n\n/\n ItemMore prop type\n /\nexport type ItemMoreType = Pick<MgItemMore, 'icon' \| 'slotlabel' \| 'size'>;\n\n/\n List of all possibles sizes\n /\nexport const sizes = ['medium', 'large', 'xlarge'] as const;\n\n/\n item Size from sizes\n */\nexport type MenuSizeType = Size & (typeof sizes)[number];\n"]}

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { Direction, sizes } from "./mg-menu.conf";
+import { toString } from "@mgdis/stencil-helpers";
 /**
  * @slot - Menu content
  */
@@ -39,7 +40,8 @@ export class MgMenu {
                 item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
                     this.focusedMenuItem = index;
                     // reset expanded on previous active menu item
-                    (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+                    const itemMoreMenuItem = this.getItemMoreMenuItem();
+                    (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {
                         this.closeMenuItem(item, index !== this.focusedMenuItem);
                     });
                 });
@@ -64,11 +66,12 @@ export class MgMenu {
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
+            var _a;
             if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
                 return;
             }
             // Insert mg-item-more outside the mg-menu shadowdom
-            if (!this.itemMoreElement) {
+            if (this.itemMoreElement === undefined) {
                 this.itemMoreElement = document.createElement('mg-item-more');
                 this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
                 this.element.appendChild(this.itemMoreElement);
@@ -84,34 +87,36 @@ export class MgMenu {
                     this.itemMoreElement[attribute] = newValue;
                 }
             }
+            if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
+                this.itemMoreElement.size = this.size;
         };
         this.label = undefined;
         this.direction = Direction.HORIZONTAL;
         this.itemmore = undefined;
-        this.size = 'regular';
+        this.size = 'medium';
         this.isChildMenu = undefined;
     }
     validateLabel(newValue) {
-        if (newValue === undefined && !this.element.getAttribute('aria-label')) {
-            throw new Error(`<${this.name}> prop "label" is required.`);
+        if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
+            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${toString(newValue)}.`);
         }
     }
     validateDirection(newValue) {
         if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${toString(newValue)}.`);
         }
     }
     validateItemMore(newValue) {
         if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
             throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
         }
-        else if (newValue) {
+        else if (newValue !== undefined) {
             this.renderMgItemMore();
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}.`);
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
     }
     /*************
@@ -158,7 +163,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '6c8e16630693e660ad5065b92ca682843d628e01', role: "list", "aria-label": this.label }, h("slot", { key: 'dc53a12c2e6dfbe4246668697908372b83440fc7' })));
+        return (h(Host, { key: '550624e40ec66eeb90f8bc4ac1590adcbaa20dfd', role: "list", "aria-label": this.label }, h("slot", { key: 'bf6f5ac748fd45e250c02d93cc7cf72e4580de3b' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -195,13 +200,13 @@ export class MgMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Direction",
-                    "resolved": "Direction.HORIZONTAL | Direction.VERTICAL",
+                    "original": "DirectionType",
+                    "resolved": "\"horizontal\" | \"vertical\"",
                     "references": {
-                        "Direction": {
+                        "DirectionType": {
                             "location": "import",
                             "path": "./mg-menu.conf",
-                            "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::Direction"
+                            "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::DirectionType"
                         }
                     }
                 },
@@ -220,7 +225,7 @@ export class MgMenu {
                 "mutable": false,
                 "complexType": {
                     "original": "ItemMoreType",
-                    "resolved": "{ size?: \"regular\" | \"medium\" | \"large\"; icon?: IconType; slotlabel?: SlotLabelType; }",
+                    "resolved": "{ size?: \"medium\" | \"large\" | \"xlarge\"; icon?: IconType; slotlabel?: SlotLabelType; }",
                     "references": {
                         "ItemMoreType": {
                             "location": "import",
@@ -241,7 +246,7 @@ export class MgMenu {
                 "mutable": false,
                 "complexType": {
                     "original": "MenuSizeType",
-                    "resolved": "\"large\" | \"medium\" | \"regular\"",
+                    "resolved": "\"large\" | \"medium\" | \"xlarge\"",
                     "references": {
                         "MenuSizeType": {
                             "location": "import",
@@ -258,7 +263,7 @@ export class MgMenu {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "'regular'"
+                "defaultValue": "'medium'"
             }
         };
     }