npm - @mgdis/mg-components - Versions diffs - 5.23.0 → 5.23.2 - Mend

@mgdis/mg-components 5.23.0 → 5.23.2

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 (181) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.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, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, Width } from '../MgInput.conf';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\n\n/\n Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n /\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/\n Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n /\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/\n Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n /\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/\n Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n /\nconst groupOptions = (acc: (SelectOption \| OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption \| OptGroup)[] => {\n if (group !== undefined) {\n // Check if group is already created\n const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n // Add to group\n if (optGroup !== undefined) {\n optGroup.options.push({ title, value, disabled });\n }\n // Create group\n else {\n acc.push({ group, options: [{ title, value, disabled }] });\n }\n } else {\n acc.push({ title, value, disabled });\n }\n return acc;\n};\n\n@Component({\n tag: 'mg-input-select',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-select.css',\n shadow: true,\n})\nexport class MgInputSelect {\n /**********\n Internal \n *********/\n\n // HTML selector\n private input: HTMLSelectElement;\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: HTMLMgInputSelectElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n validateValue(newValue: MgInputSelect['value']): void {\n if (allItemsAreString(this.items) && typeof newValue === 'string') {\n this.readonlyValue = this.input?.value ? this.input.value : newValue;\n } else if (allItemsAreOptions(this.items)) {\n this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n } else {\n this.readonlyValue = null;\n }\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: (string \| SelectOption)[];\n @Watch('items')\n validateItems(newValue: MgInputSelect['items']): void {\n // Empty options\n if (newValue.length === 0) {\n this.options = [];\n }\n // String array\n else if (allItemsAreString(newValue)) {\n if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (allItemsAreOptions(newValue)) {\n this.valueExist = newValue.map(item => item.value).includes(this.value);\n // Grouped object options\n if (newValue.some(item => Boolean(item.group))) {\n this.options = newValue.reduce(groupOptions, []);\n }\n // Standart object options\n else {\n this.options = newValue;\n }\n } else {\n 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.');\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 = 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({ mutable: true }) placeholder: string;\n\n /\n Option to remove placeholder\n /\n @Prop() placeholderHide = false;\n\n /\n Option to disable placeholder\n /\n @Prop() placeholderDisabled = false;\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\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 /\n Define input width\n /\n @Prop({ reflect: true }) mgWidth: Width;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\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 Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--select']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Formated items for display\n /\n @State() options: (SelectOption \| OptGroup)[];\n\n /\n Does value match any item option\n /\n @State() valueExist: boolean;\n\n /\n Does value match any item option\n /\n @State() readonlyValue: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['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: MgInputSelect['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-select> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-select> 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: MgInputSelect['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 this.updateValue();\n if (this.hasDisplayedError) this.setErrorMessage();\n };\n\n /\n Method to compare item.title with input.value\n * @param item - item to compare with\n * @returns truthy if input.value is an item\n /\n private isInputValue = (item: SelectOption): boolean => item.title === this.input?.value;\n\n /\n value props setter\n * @param newValue - value to update with\n /\n private setValue = (newValue: MgInputSelect['value']): void => {\n this.checkValidity();\n this.value = newValue;\n };\n\n /\n Update value from input.value\n /\n private updateValue = (): void => {\n if (this.input.value === '') {\n this.setValue(null);\n } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n this.setValue(this.input.value);\n } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n this.setValue(this.items.find(this.isInputValue).value);\n } else {\n // before set newValue with push to options[] the unknown input.value with a disable satus\n this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n this.setValue(this.input.value);\n }\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Input value is disabled\n * @returns truthy if input value is disabled\n /\n private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(!this.isDisabledValue() && (this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true)));\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 if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\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 // Validate\n this.validateItems(this.items);\n this.validateValue(this.value);\n // Set default placeholder\n if (this.placeholder === undefined \|\| this.placeholder === '') {\n this.placeholder = this.messages.input.select.placeholder;\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 option\n * @param option - to render\n * @returns render option\n /\n private renderOption = (option: SelectOption): HTMLElement => (\n <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n {option.title}\n </option>\n );\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={undefined}\n readonlyValue={this.readonlyValue}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <select\n class=\"mg-c-input__box\"\n id={this.identifier}\n name={this.name}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLSelectElement) => {\n if (el !== null) this.input = el;\n }}\n >\n {(!this.placeholderHide \|\| !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n {this.placeholder}\n </option>\n )}\n {this.options.map(option =>\n isOptGroup(option) ? (\n <optgroup label={option.group} key={option.group}>\n {option.options.map(this.renderOption)}\n </optgroup>\n ) : (\n isOption(option) && this.renderOption(option)\n ),\n )}\n </select>\n </MgInput>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.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, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, Width } from '../MgInput.conf';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\n\n/\n Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n /\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/\n Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n /\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/\n Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n /\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/\n Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n /\nconst groupOptions = (acc: (SelectOption \| OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption \| OptGroup)[] => {\n if (group !== undefined) {\n // Check if group is already created\n const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n // Add to group\n if (optGroup !== undefined) {\n optGroup.options.push({ title, value, disabled });\n }\n // Create group\n else {\n acc.push({ group, options: [{ title, value, disabled }] });\n }\n } else {\n acc.push({ title, value, disabled });\n }\n return acc;\n};\n\n@Component({\n tag: 'mg-input-select',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-select.css',\n shadow: true,\n})\nexport class MgInputSelect {\n /**********\n Internal \n *********/\n\n // HTML selector\n private input: HTMLSelectElement;\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: HTMLMgInputSelectElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n validateValue(newValue: MgInputSelect['value']): void {\n if (allItemsAreString(this.items) && typeof newValue === 'string') {\n this.readonlyValue = this.input?.value ? this.input.value : newValue;\n } else if (allItemsAreOptions(this.items)) {\n this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n } else {\n this.readonlyValue = null;\n }\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: (string \| SelectOption)[];\n @Watch('items')\n validateItems(newValue: MgInputSelect['items']): void {\n // Empty options\n if (newValue.length === 0) {\n this.options = [];\n }\n // String array\n else if (allItemsAreString(newValue)) {\n if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (allItemsAreOptions(newValue)) {\n this.valueExist = newValue.map(item => item.value).includes(this.value);\n // Grouped object options\n if (newValue.some(item => Boolean(item.group))) {\n this.options = newValue.reduce(groupOptions, []);\n }\n // Standart object options\n else {\n this.options = newValue;\n }\n } else {\n 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.');\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 = 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({ mutable: true }) placeholder: string;\n\n /\n Option to remove placeholder\n /\n @Prop() placeholderHide = false;\n\n /\n Option to disable placeholder\n /\n @Prop() placeholderDisabled = false;\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\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 /\n Define input width\n /\n @Prop({ reflect: true }) mgWidth: Width;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\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 Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--select']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Formated items for display\n /\n @State() options: (SelectOption \| OptGroup)[];\n\n /\n Does value match any item option\n /\n @State() valueExist: boolean;\n\n /\n Does value match any item option\n /\n @State() readonlyValue: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['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: MgInputSelect['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-select> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-select> 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: MgInputSelect['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 this.updateValue();\n if (this.hasDisplayedError) this.setErrorMessage();\n };\n\n /\n Method to compare item.title with input.value\n * @param item - item to compare with\n * @returns truthy if input.value is an item\n /\n private isInputValue = (item: SelectOption): boolean => item.title === this.input?.value;\n\n /\n value props setter\n * @param newValue - value to update with\n /\n private setValue = (newValue: MgInputSelect['value']): void => {\n this.checkValidity();\n this.value = newValue;\n };\n\n /\n Update value from input.value\n /\n private updateValue = (): void => {\n if (this.input.value === '') {\n this.setValue(null);\n } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n this.setValue(this.input.value);\n } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n this.setValue(this.items.find(this.isInputValue).value);\n } else {\n // before set newValue with push to options[] the unknown input.value with a disable satus\n this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n this.setValue(this.input.value);\n }\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Input value is disabled\n * @returns truthy if input value is disabled\n /\n private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(!this.isDisabledValue() && (this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true)));\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 if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\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 // Validate\n this.validateItems(this.items);\n this.validateValue(this.value);\n // Set default placeholder\n if (this.placeholder === undefined \|\| this.placeholder === '') {\n this.placeholder = this.messages.input.select.placeholder;\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 option\n * @param option - to render\n * @returns render option\n /\n private renderOption = (option: SelectOption): HTMLElement => (\n <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n {option.title}\n </option>\n );\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={undefined}\n readonlyValue={this.readonlyValue}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <select\n class=\"mg-c-input__box\"\n id={this.identifier}\n name={this.name}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLSelectElement) => {\n if (el !== null) this.input = el;\n }}\n >\n {(!this.placeholderHide \|\| !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n {this.placeholder}\n </option>\n )}\n {this.options.map(option =>\n isOptGroup(option) ? (\n <optgroup label={option.group} key={option.group}>\n {option.options.map(this.renderOption)}\n </optgroup>\n ) : (\n isOption(option) && this.renderOption(option)\n ),\n )}\n </select>\n </MgInput>\n );\n }\n}\n"]}

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

@@ -224,14 +224,14 @@ export class MgInputText {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-c-input__with-character-left", style: {
+        return (h(MgInput, { key: 'cb20a38ce93389f724b1e97cadd12e8c70b9d1da', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { key: '87607c013e38407eeb9f5c42d25fd5164eb065ec', class: "mg-c-input__with-character-left", style: {
                 '--mg-character-left-message-length': (this.displayCharacterLeft
                     ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
                     : 0).toString(),
-            } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-c-input__box", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+            } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { key: 'c12cf678c274d58c84618c7b7d7d7bca4740359c', type: this.type, class: "mg-c-input__box", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { key: 'be764e76497ea2bc31e574c264f98d26fae9accd', name: "append-input" })));
     }
     static get is() { return "mg-input-text"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-text.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-text/mg-input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, EventEmitter, State, Element, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { TextType } from './mg-input-text.conf';\n\nconst isDatalistOption = (options: unknown[]): options is string[] => Array.isArray(options) && options.every(option => typeof option === 'string');\n\n@Component({\n tag: 'mg-input-text',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css',\n shadow: true,\n})\nexport class MgInputText {\n /***********\n Internal \n *********/\n\n // Classes\n private classFocus = 'mg-u-is-focused';\n private classIsInputGroupAppend = 'mg-c-input--is-input-group-append';\n private classHasIcon = 'mg-c-input--has-icon';\n\n // IDs\n private characterLeftId;\n private datalistId;\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n private handlerInProgress: Handler;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\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 Input type\n /\n @Prop() type: TextType = 'text';\n\n /\n Input icon\n /\n @Prop() icon: string;\n @Watch('icon')\n validateIcon(newValue: string): void {\n if (newValue !== undefined) {\n this.classCollection.add(this.classHasIcon);\n } else {\n this.classCollection.delete(this.classHasIcon);\n }\n }\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 Define datalist options\n /\n @Prop() datalistoptions: string[];\n @Watch('datalistoptions')\n validateDatalistoptions(newValue: MgInputText['datalistoptions']) {\n if (Boolean(newValue) && !isDatalistOption(newValue)) {\n throw new Error('<mg-input-text> prop \"datalistoptions\" values must be the same type, string.');\n }\n }\n\n /\n Input max length\n /\n @Prop() maxlength = 400;\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\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 /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\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-text> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n }\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Define if component should display character left\n /\n @Prop() displayCharacterLeft = true;\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 Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--text']);\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<HTMLMgInputTextElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextElement['valid']>;\n\n /\n Public method to play input focus\n /\n @Method()\n async setFocus(): Promise<void> {\n this.input.focus();\n }\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: MgInputText['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-text> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-text> 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: MgInputText['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 /\n Handle input event\n /\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\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 Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\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 // Does not match pattern\n else if (!this.valid && this.input.validity.patternMismatch) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (!this.valid && this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n };\n\n /\n Validate append slot\n /\n private validateAppendSlot = (): void => {\n const slotAppendInput: HTMLSlotElement[] = Array.from(this.element.querySelectorAll('[slot=\"append-input\"]'));\n\n if (slotAppendInput.length === 1) {\n this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-c-input--is-append-input-slot-content');\n } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n this.classCollection.add(this.classIsInputGroupAppend);\n this.classCollection.add('mg-c-input--has-buttons-group-append');\n }\n };\n\n /\n Methode to control datalist display condition\n * @returns true if display condition success\n /\n private hasDatalist = (): boolean => isDatalistOption(this.datalistoptions) && this.datalistoptions.length > 0;\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 this.datalistId = `${this.identifier}-datalist`;\n // Validate\n this.validateIcon(this.icon);\n this.validateDatalistoptions(this.datalistoptions);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n this.validateAppendSlot();\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 <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <div\n class=\"mg-c-input__with-character-left\"\n style={{\n '--mg-character-left-message-length': (this.displayCharacterLeft\n ? (this.maxlength - (this.value \|\| '').length).toString().length + this.maxlength.toString().length + 1\n : 0\n ).toString(),\n }}\n >\n {this.icon !== undefined && <mg-icon icon={this.icon}></mg-icon>}\n <input\n type={this.type}\n class=\"mg-c-input__box\"\n value={this.value}\n id={this.identifier}\n list={this.hasDatalist() ? this.datalistId : undefined}\n autocomplete={this.hasDatalist() ? 'off' : undefined}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n pattern={this.pattern}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n {this.hasDatalist() && (\n <datalist id={this.datalistId}>\n {this.datalistoptions.map(option => (\n <option value={option} key={option}></option>\n ))}\n </datalist>\n )}\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 <slot name=\"append-input\"></slot>\n </MgInput>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-text.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-text/mg-input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, EventEmitter, State, Element, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { TextType } from './mg-input-text.conf';\n\nconst isDatalistOption = (options: unknown[]): options is string[] => Array.isArray(options) && options.every(option => typeof option === 'string');\n\n@Component({\n tag: 'mg-input-text',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css',\n shadow: true,\n})\nexport class MgInputText {\n /***********\n Internal \n *********/\n\n // Classes\n private classFocus = 'mg-u-is-focused';\n private classIsInputGroupAppend = 'mg-c-input--is-input-group-append';\n private classHasIcon = 'mg-c-input--has-icon';\n\n // IDs\n private characterLeftId;\n private datalistId;\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n private handlerInProgress: Handler;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\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 Input type\n /\n @Prop() type: TextType = 'text';\n\n /\n Input icon\n /\n @Prop() icon: string;\n @Watch('icon')\n validateIcon(newValue: string): void {\n if (newValue !== undefined) {\n this.classCollection.add(this.classHasIcon);\n } else {\n this.classCollection.delete(this.classHasIcon);\n }\n }\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 Define datalist options\n /\n @Prop() datalistoptions: string[];\n @Watch('datalistoptions')\n validateDatalistoptions(newValue: MgInputText['datalistoptions']) {\n if (Boolean(newValue) && !isDatalistOption(newValue)) {\n throw new Error('<mg-input-text> prop \"datalistoptions\" values must be the same type, string.');\n }\n }\n\n /\n Input max length\n /\n @Prop() maxlength = 400;\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\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 /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\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-text> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n }\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Define if component should display character left\n /\n @Prop() displayCharacterLeft = true;\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 Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--text']);\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<HTMLMgInputTextElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextElement['valid']>;\n\n /\n Public method to play input focus\n /\n @Method()\n async setFocus(): Promise<void> {\n this.input.focus();\n }\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: MgInputText['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-text> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-text> 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: MgInputText['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 /\n Handle input event\n /\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\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 Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\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 // Does not match pattern\n else if (!this.valid && this.input.validity.patternMismatch) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (!this.valid && this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n };\n\n /\n Validate append slot\n /\n private validateAppendSlot = (): void => {\n const slotAppendInput: HTMLSlotElement[] = Array.from(this.element.querySelectorAll('[slot=\"append-input\"]'));\n\n if (slotAppendInput.length === 1) {\n this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-c-input--is-append-input-slot-content');\n } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n this.classCollection.add(this.classIsInputGroupAppend);\n this.classCollection.add('mg-c-input--has-buttons-group-append');\n }\n };\n\n /\n Methode to control datalist display condition\n * @returns true if display condition success\n /\n private hasDatalist = (): boolean => isDatalistOption(this.datalistoptions) && this.datalistoptions.length > 0;\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 this.datalistId = `${this.identifier}-datalist`;\n // Validate\n this.validateIcon(this.icon);\n this.validateDatalistoptions(this.datalistoptions);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n this.validateAppendSlot();\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 <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <div\n class=\"mg-c-input__with-character-left\"\n style={{\n '--mg-character-left-message-length': (this.displayCharacterLeft\n ? (this.maxlength - (this.value \|\| '').length).toString().length + this.maxlength.toString().length + 1\n : 0\n ).toString(),\n }}\n >\n {this.icon !== undefined && <mg-icon icon={this.icon}></mg-icon>}\n <input\n type={this.type}\n class=\"mg-c-input__box\"\n value={this.value}\n id={this.identifier}\n list={this.hasDatalist() ? this.datalistId : undefined}\n autocomplete={this.hasDatalist() ? 'off' : undefined}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n pattern={this.pattern}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n {this.hasDatalist() && (\n <datalist id={this.datalistId}>\n {this.datalistoptions.map(option => (\n <option value={option} key={option}></option>\n ))}\n </datalist>\n )}\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 <slot name=\"append-input\"></slot>\n </MgInput>\n );\n }\n}\n"]}

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

@@ -197,7 +197,7 @@ export class MgInputTextarea {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h(MgInput, { key: 'c77be56541d90814c1b829182dcccfbdb4321f15', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { key: '5380abe8e0fcf53da64108a2ea05de407ca63885', class: "mg-c-input__with-character-left" }, h("textarea", { key: '75065e3b389fd60796a7f83232b50fdae06e3b4f', class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
                 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',

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":"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","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\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 classFocus = 'mg-u-is-focused';\n private 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\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 /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\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 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 !== undefined && 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 // 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 <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\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--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 </MgInput>\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 { MgInput } from '../MgInput';\nimport { Handler, Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\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 classFocus = 'mg-u-is-focused';\n private 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\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 /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\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 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 !== undefined && 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 // 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 <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\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--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 </MgInput>\n );\n }\n}\n"]}

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

@@ -193,7 +193,7 @@ export class MgInputToggle {
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, 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" })))));
+        return (h(MgInput, { key: '2637550cb5e98dc92cba8c362610a246e537473d', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { key: '63e4399d445ce876c767a045c6bab8d4f20da1be', 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: 'b38f16ddaaa4c0ce8f32a46d5ca22fe0b0656ad5', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dd910979d5043a56f98358b2443507440cec8a93', name: "item-1" })), h("span", { key: 'acc65197a4f30f7b65c070f9f9299e7a5e913040', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dee4de86838005833bfa1a613b21f065354ca2f4', 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 { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\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 classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private 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: string[] \| ToggleValue[]): 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 as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\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 handleIsOnOff(newValue: boolean): 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 handleIsIcon(newValue: boolean): 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 handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\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: boolean): 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.options[newValue ? 1 : 0].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 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.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\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 </MgInput>\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 { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\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 classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private 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: string[] \| ToggleValue[]): 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 as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\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 handleIsOnOff(newValue: boolean): 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 handleIsIcon(newValue: boolean): 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 handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\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: boolean): 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.options[newValue ? 1 : 0].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 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.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\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 </MgInput>\n );\n }\n}\n"]}

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

@@ -153,7 +153,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { role: "list", "aria-label": this.label }, h("slot", null)));
+        return (h(Host, { key: '22c0f16663ac432526aef9d0ec1c3d9152b8ca3a', role: "list", "aria-label": this.label }, h("slot", { key: 'de77bd6471725518cf14b9a75fb513a3d65a8033' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -278,7 +278,7 @@ export class MgMenuItem {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+        return (h(Host, { key: 'b3932a090814940718c7f3dd0bc9a9636e2fcb88', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
         ])));