@mgdis/mg-components 5.26.0 → 5.27.0

package/dist/collection/components/molecules/inputs/MgInput.conf.js

@@ -1,14 +0,0 @@
-/**
- * Possible input width
- */
-export const widths = [2, 4, 16, 'full'];
-/**
- * Available handlers
- */
-export var Handler;
-(function (Handler) {
-    Handler["BLUR"] = "blur";
-    Handler["FOCUS"] = "focus";
-})(Handler || (Handler = {}));
-export const tooltipPositions = ['input', 'label'];
-//# sourceMappingURL=MgInput.conf.js.map

package/dist/collection/components/molecules/inputs/MgInput.conf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MgInput.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.conf.ts"],"names":[],"mappings":"AAgCA;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAU,CAAC;AAkBlD;;GAEG;AACH,MAAM,CAAN,IAAY,OAGX;AAHD,WAAY,OAAO;IACjB,wBAAa,CAAA;IACb,0BAAe,CAAA;AACjB,CAAC,EAHW,OAAO,KAAP,OAAO,QAGlB;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import type { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\nimport type { ClassList } from '@mgdis/stencil-helpers';\n\n/**\n * MgInput component props\n */\nexport interface MgInputProps {\n  // Global\n  identifier: string;\n  classCollection: ClassList;\n  // Label\n  label: string;\n  labelOnTop: boolean;\n  labelHide: boolean;\n  isFieldset: MgInputTitle['isLegend'];\n  // Input\n  value: string;\n  readonlyValue: string | string[];\n  required: boolean;\n  readonly: boolean;\n  mgWidth: Width;\n  disabled: boolean;\n  // Tooltip\n  tooltip: string;\n  tooltipPosition: TooltipPosition;\n  // Help Text\n  helpText: string;\n  // Error Message\n  errorMessage: string;\n  // ariaDescribedbyIDs\n  ariaDescribedbyIDs: string[];\n}\n/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/**\n * Available handlers\n */\nexport enum Handler {\n  BLUR = 'blur',\n  FOCUS = 'focus',\n}\n\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n"]}

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -1,125 +0,0 @@
-import { h } from "@stencil/core";
-import { widths, tooltipPositions } from "./MgInput.conf";
-import { isValidString } from "@mgdis/stencil-helpers";
-/**
- * Apply in all input child node the aria-describedby attribute
- * @param children - Represent scoped elements
- * @param ariaDescribedbyIDs - List of IDs
- * @param utils - Stencil.js utils
- * @returns Children with aria-describedby attribute
- */
-const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
-    if (['input', 'select', 'textarea'].includes(child.vtag)) {
-        return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
-    }
-    // we recursively apply ariadescribedBy attributes to child input nodes if exists
-    if (child.vchildren === null)
-        return Object.assign({}, child);
-    return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
-});
-/**
- * Add classes based on props
- * @param props - MgInput Interface Props
- */
-const manageClasses = (props) => {
-    props.classCollection.add('mg-c-input');
-    if (props.labelOnTop)
-        props.classCollection.add('mg-c-input--label-on-top');
-    else
-        props.classCollection.delete('mg-c-input--label-on-top');
-    if (props.readonly)
-        props.classCollection.add('mg-c-input--readonly');
-    else
-        props.classCollection.delete('mg-c-input--readonly');
-    widths.forEach(width => {
-        props.classCollection.delete(`mg-c-input--width-${width}`);
-    });
-    if (props.mgWidth !== undefined)
-        props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);
-};
-/**
- * Check props configuration
- * @param props - MgInput Interface Props
- */
-const checkPropsConfig = (props) => {
-    if (!isValidString(props.identifier)) {
-        throw new Error('<mg-input> prop "identifier" is required.');
-    }
-    if (!isValidString(props.label)) {
-        throw new Error('<mg-input> prop "label" is required.');
-    }
-    if (props.labelOnTop && props.labelHide) {
-        throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
-    }
-    if (!tooltipPositions.includes(props.tooltipPosition)) {
-        throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}`);
-    }
-};
-/**
- * Get tagname
- * @param isFieldset - is fieldset
- * @returns tag name
- */
-const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' : 'fieldset');
-/**
- * MgInput Interface
- */
-/**
- * Get input template
- * @param props - MgInput Interface Props
- * @param children - Represent scoped elements
- * @param utils - Stencil.js utils
- * @returns input template
- */
-export const MgInput = (props, children, utils) => {
-    /**
-     * Check props config
-     */
-    checkPropsConfig(props);
-    /**
-     * Set readonly value
-     */
-    if (props.readonlyValue === undefined)
-        props.readonlyValue = props.value;
-    /**
-     * Component classes
-     */
-    manageClasses(props);
-    /**
-     * a11y IDs
-     */
-    const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
-    // Help text
-    const helpTextId = `${props.identifier}-help-text`;
-    if (typeof props.helpText === 'string' && props.helpText !== '') {
-        ariaDescribedbyIDs.add(helpTextId);
-    }
-    // Error Message
-    const helpTextErrorId = `${props.identifier}-error`;
-    if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
-        ariaDescribedbyIDs.add(helpTextErrorId);
-    }
-    /**
-     * Return template
-     *
-     * +--------+---------+--------------+---------+
-     * |  label | tooltip | input        | tooltip |
-     * |--------+---------+--------------+---------+
-     * |                  | nb Char Left           |
-     * |                  +------------------------+
-     * |                  | Help Text              |
-     * |                  +------------------------+
-     * |                  | Error                  |
-     * +------------------+------------------------+
-     *
-     * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
-     */
-    const TagName = getTagName(props.isFieldset, props.readonly);
-    /**
-     * Get tooltip node
-     * @returns mg-tooltip
-     */
-    const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip }, h("mg-icon", { icon: "info-circle" })));
-    return (h(TagName, { class: props.classCollection.join() }, h("div", { class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide } }, h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label), props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()), props.readonly ? (h("div", { class: "mg-c-input__input-container" }, Array.isArray(props.readonlyValue) ? (h("ul", null, props.readonlyValue.map(value => (h("li", { key: value }, h("strong", null, value)))))) : (h("strong", null, props.readonlyValue)), children.filter(child => Object.values(child).includes('append-input')))) : (h("div", { class: "mg-c-input__input-container" }, h("div", { class: { 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-c-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-c-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
-};
-//# sourceMappingURL=MgInput.js.map

package/dist/collection/components/molecules/inputs/MgInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MgInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, tooltipPositions, type MgInputProps } from './MgInput.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * Apply in all input child node the aria-describedby attribute\n * @param children - Represent scoped elements\n * @param ariaDescribedbyIDs - List of IDs\n * @param utils - Stencil.js utils\n * @returns Children with aria-describedby attribute\n */\nconst applyAriadescribedBy = (children: VNode[], ariaDescribedbyIDs: Set<string>, utils: FunctionalUtilities): VNode[] =>\n  utils.map(children, child => {\n    if (['input', 'select', 'textarea'].includes(child.vtag as string)) {\n      return {\n        ...child,\n        vattrs: {\n          ...child.vattrs,\n          'aria-describedby': [...ariaDescribedbyIDs].join(' '),\n        },\n      };\n    }\n\n    // we recursively apply ariadescribedBy attributes to child input nodes if exists\n    if (child.vchildren === null) return { ...child };\n    return {\n      ...child,\n      vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils),\n    };\n  });\n\n/**\n * Add classes based on props\n * @param props - MgInput Interface Props\n */\nconst manageClasses = (props: MgInputProps): void => {\n  props.classCollection.add('mg-c-input');\n\n  if (props.labelOnTop) props.classCollection.add('mg-c-input--label-on-top');\n  else props.classCollection.delete('mg-c-input--label-on-top');\n\n  if (props.readonly) props.classCollection.add('mg-c-input--readonly');\n  else props.classCollection.delete('mg-c-input--readonly');\n\n  widths.forEach(width => {\n    props.classCollection.delete(`mg-c-input--width-${width}`);\n  });\n  if (props.mgWidth !== undefined) props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);\n};\n\n/**\n * Check props configuration\n * @param props - MgInput Interface Props\n */\nconst checkPropsConfig = (props: MgInputProps): void => {\n  if (!isValidString(props.identifier)) {\n    throw new Error('<mg-input> prop \"identifier\" is required.');\n  }\n  if (!isValidString(props.label)) {\n    throw new Error('<mg-input> prop \"label\" is required.');\n  }\n  if (props.labelOnTop && props.labelHide) {\n    throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n  }\n  if (!tooltipPositions.includes(props.tooltipPosition)) {\n    throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}`);\n  }\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: MgInputProps['isFieldset'], readOnly: MgInputProps['readonly']): string => (!isFieldset || readOnly ? 'div' : 'fieldset');\n\n/**\n * MgInput Interface\n */\n\n/**\n * Get input template\n * @param props - MgInput Interface Props\n * @param children - Represent scoped elements\n * @param utils - Stencil.js utils\n * @returns input template\n */\nexport const MgInput: FunctionalComponent<MgInputProps> = (props: MgInputProps, children: VNode[], utils: FunctionalUtilities): VNode[] => {\n  /**\n   * Check props config\n   */\n  checkPropsConfig(props);\n\n  /**\n   * Set readonly value\n   */\n  if (props.readonlyValue === undefined) props.readonlyValue = props.value;\n\n  /**\n   * Component classes\n   */\n  manageClasses(props);\n\n  /**\n   * a11y IDs\n   */\n  const ariaDescribedbyIDs: Set<string> = new Set(props.ariaDescribedbyIDs);\n\n  // Help text\n  const helpTextId = `${props.identifier}-help-text`;\n  if (typeof props.helpText === 'string' && props.helpText !== '') {\n    ariaDescribedbyIDs.add(helpTextId);\n  }\n\n  // Error Message\n  const helpTextErrorId = `${props.identifier}-error`;\n  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {\n    ariaDescribedbyIDs.add(helpTextErrorId);\n  }\n\n  /**\n   * Return template\n   *\n   * +--------+---------+--------------+---------+\n   * |  label | tooltip | input        | tooltip |\n   * |--------+---------+--------------+---------+\n   * |                  | nb Char Left           |\n   * |                  +------------------------+\n   * |                  | Help Text              |\n   * |                  +------------------------+\n   * |                  | Error                  |\n   * +------------------+------------------------+\n   *\n   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change\n   */\n\n  const TagName = getTagName(props.isFieldset, props.readonly);\n\n  /**\n   * Get tooltip node\n   * @returns mg-tooltip\n   */\n  const getTooltip = (): VNode[] => (\n    <mg-tooltip identifier={`${props.identifier}-tooltip`} message={props.tooltip}>\n      <mg-icon icon=\"info-circle\"></mg-icon>\n    </mg-tooltip>\n  );\n\n  return (\n    <TagName class={props.classCollection.join()}>\n      <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide }}>\n        <mg-input-title identifier={props.identifier} readonly={props.readonly} required={props.required && !props.disabled && !props.readonly} is-legend={props.isFieldset}>\n          {props.label}\n        </mg-input-title>\n        {props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()}\n      </div>\n      {props.readonly ? (\n        <div class=\"mg-c-input__input-container\">\n          {Array.isArray(props.readonlyValue) ? (\n            <ul>\n              {props.readonlyValue.map(value => (\n                <li key={value}>\n                  <strong>{value}</strong>\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <strong>{props.readonlyValue}</strong>\n          )}\n          {children.filter(child => Object.values(child).includes('append-input'))}\n        </div>\n      ) : (\n        <div class=\"mg-c-input__input-container\">\n          <div class={{ 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined }}>\n            {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n            {props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && getTooltip()}\n          </div>\n          {props.helpText && <div id={helpTextId} class=\"mg-c-input__help-text\" innerHTML={props.helpText}></div>}\n          {props.errorMessage && !props.readonly && !props.disabled && (\n            <div id={helpTextErrorId} class=\"mg-c-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n          )}\n        </div>\n      )}\n    </TagName>\n  );\n};\n"]}

package/dist/collection/utils/playwright.e2e.test.utils.js

@@ -1,100 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { test as playwrightTest, expect as playwrightExpect, devices as playwrightDevices } from "@playwright/test";
-import { readFile } from "fs/promises";
-import { join } from "path";
-/**
- * Add mg-components to browser page
- *
- * @param page - browser page
- * @param html - html to load in page
- */
-export const setPageContent = async (page, html, viewportSize) => {
-    // We need to add mg-components to the e2e page
-    // Those solutions wasn't working to add the CSS
-    // await page.addStyleTag({ url: 'http://localhost:3333/build/mg-components.css' });
-    // CSS
-    const css = await readFile(join(__dirname, '../../www/build/mg-components.css'), { encoding: 'utf8' });
-    await page.addStyleTag({ content: css });
-    // JS
-    await page.addScriptTag({ url: 'http://localhost:3333/build/mg-components.esm.js', type: 'module' });
-    // Set page size before style setting to prevent "resize" event to be triggered
-    if (viewportSize !== undefined)
-        await page.setViewportSize(viewportSize);
-    // Set page content
-    // Added the `e2e-screenshot` class to be able to do the screenshot on this specific one with
-    // `await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();`
-    await page.setContent(`<style>${css} .e2e-screenshot { display: inline-block; }</style><span class="e2e-screenshot">${html}</span>`);
-    // Make sure everything is loaded
-    await page.waitForLoadState('networkidle');
-    await page.waitForSelector('html.hydrated');
-};
-/**
- * playwright 'expect' function definition
- */
-export const expect = playwrightExpect;
-/**
- * playwright 'describe' function definition
- */
-export const describe = playwrightTest.describe;
-/**
- * playwright 'test' function definition
- */
-export const test = playwrightTest;
-/**
- * playwright 'devices' definition
- */
-export const devices = playwrightDevices;
-/**
- * Value to get in string
- * @param value - valut to stringify
- * @returns stringified value
- */
-const valueToString = (value) => (typeof value === 'object' ? JSON.stringify(value) : `${value}`);
-/**
- * repeat test over array
- * @param array - array of test
- * @param option - test runner option
- * @returns describe iteration
- */
-export const describeEach = (array, option) => (title, cb) => {
-    array.forEach(value => {
-        const displayTitle = title.replace('%s', valueToString(value));
-        const fn = () => cb(value);
-        if (Boolean(option))
-            describe[option](displayTitle, fn);
-        else
-            describe(displayTitle, fn);
-    });
-};
-/**
- * repeat test over array
- * @param array - array of test
- * @param option - test runner option
- * @returns test iteration
- */
-export const testEach = (array, option) => (title, cb) => {
-    array.forEach(value => {
-        const displayTitle = title.replace('%s', valueToString(value));
-        const fn = async ({ page }) => cb(page, value);
-        if (Boolean(option))
-            test[option](displayTitle, fn);
-        else
-            test(displayTitle, fn);
-    });
-};
-/**
- * Update .e2e-screenshot style for screenshot needs
- * @param page - playwright Page
- * @param params - css properties to apply
- * @returns class style definition
- */
-export const updateScreenshotClass = async (page, params) => page.evaluate(params => {
-    const css = `.e2e-screenshot { ${Object.keys(params)
-        .map(key => `${key}: ${typeof params[key] === 'string' ? params[key] : ''}`)
-        .join(';')} }`;
-    const body = document.getElementsByTagName('body')[0];
-    const style = document.createElement('style');
-    body.appendChild(style);
-    style.appendChild(document.createTextNode(css));
-}, params);
-//# sourceMappingURL=playwright.e2e.test.utils.js.map

package/dist/collection/utils/playwright.e2e.test.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"playwright.e2e.test.utils.js","sourceRoot":"","sources":["../../src/utils/playwright.e2e.test.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type Page, ViewportSize, test as playwrightTest, expect as playwrightExpect, devices as playwrightDevices } from '@playwright/test';\nimport { readFile } from 'fs/promises';\nimport { join } from 'path';\n\n/**\n * Add mg-components to browser page\n *\n * @param page - browser page\n * @param html - html to load in page\n */\nexport const setPageContent = async (page: Page, html: string, viewportSize?: ViewportSize): Promise<void> => {\n  // We need to add mg-components to the e2e page\n  // Those solutions wasn't working to add the CSS\n  // await page.addStyleTag({ url: 'http://localhost:3333/build/mg-components.css' });\n\n  // CSS\n  const css = await readFile(join(__dirname, '../../www/build/mg-components.css'), { encoding: 'utf8' });\n  await page.addStyleTag({ content: css });\n\n  // JS\n  await page.addScriptTag({ url: 'http://localhost:3333/build/mg-components.esm.js', type: 'module' });\n\n  // Set page size before style setting to prevent \"resize\" event to be triggered\n  if (viewportSize !== undefined) await page.setViewportSize(viewportSize);\n\n  // Set page content\n  // Added the `e2e-screenshot` class to be able to do the screenshot on this specific one with\n  // `await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();`\n  await page.setContent(`<style>${css} .e2e-screenshot { display: inline-block; }</style><span class=\"e2e-screenshot\">${html}</span>`);\n\n  // Make sure everything is loaded\n  await page.waitForLoadState('networkidle');\n  await page.waitForSelector('html.hydrated');\n};\n\n/**\n * playwright 'expect' function definition\n */\nexport const expect = playwrightExpect;\n\n/**\n * playwright 'describe' function definition\n */\nexport const describe = playwrightTest.describe;\n\n/**\n * playwright 'test' function definition\n */\nexport const test = playwrightTest;\n\n/**\n * playwright 'devices' definition\n */\nexport const devices = playwrightDevices;\n\n/**\n * Value to get in string\n * @param value - valut to stringify\n * @returns stringified value\n */\nconst valueToString = (value: unknown): string => (typeof value === 'object' ? JSON.stringify(value) : `${value}`);\n\n/**\n * Declare page type\n */\nexport type PageType = Page;\n\n/**\n * repeat test over array\n * @param array - array of test\n * @param option - test runner option\n * @returns describe iteration\n */\nexport const describeEach = (array: unknown[] | any, option?: 'skip' | 'only') => (title: string, cb: (param: unknown) => void) => {\n  array.forEach(value => {\n    const displayTitle = title.replace('%s', valueToString(value));\n    const fn = () => cb(value);\n    if (Boolean(option)) describe[option](displayTitle, fn);\n    else describe(displayTitle, fn);\n  });\n};\n\n/**\n * repeat test over array\n * @param array - array of test\n * @param option - test runner option\n * @returns test iteration\n */\nexport const testEach = (array: unknown[] | any, option?: 'skip' | 'only') => (title: string, cb: (page: PageType, param: unknown) => Promise<void>) => {\n  array.forEach(value => {\n    const displayTitle = title.replace('%s', valueToString(value));\n    const fn = async ({ page }) => cb(page, value);\n    if (Boolean(option)) test[option](displayTitle, fn);\n    else test(displayTitle, fn);\n  });\n};\n\n/**\n * Update .e2e-screenshot style for screenshot needs\n * @param page - playwright Page\n * @param params - css properties to apply\n * @returns class style definition\n */\nexport const updateScreenshotClass = async (page: Page, params: unknown): Promise<void> =>\n  page.evaluate(params => {\n    const css = `.e2e-screenshot { ${Object.keys(params)\n      .map(key => `${key}: ${typeof params[key] === 'string' ? params[key] : ''}`)\n      .join(';')} }`;\n    const body = document.getElementsByTagName('body')[0];\n    const style = document.createElement('style');\n    body.appendChild(style);\n    style.appendChild(document.createTextNode(css));\n  }, params);\n"]}

package/dist/components/MgInput.js

@@ -1,155 +0,0 @@
-import { h } from '@stencil/core/internal/client';
-import { B as Be } from './index.es.js';
-
-/**
- * Possible input width
- */
-const widths = [2, 4, 16, 'full'];
-/**
- * Available handlers
- */
-var Handler;
-(function (Handler) {
-    Handler["BLUR"] = "blur";
-    Handler["FOCUS"] = "focus";
-})(Handler || (Handler = {}));
-const tooltipPositions = ['input', 'label'];
-
-/**
- * Apply in all input child node the aria-describedby attribute
- * @param children - Represent scoped elements
- * @param ariaDescribedbyIDs - List of IDs
- * @param utils - Stencil.js utils
- * @returns Children with aria-describedby attribute
- */
-const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
-    if (['input', 'select', 'textarea'].includes(child.vtag)) {
-        return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
-    }
-    // we recursively apply ariadescribedBy attributes to child input nodes if exists
-    if (child.vchildren === null)
-        return Object.assign({}, child);
-    return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
-});
-/**
- * Add classes based on props
- * @param props - MgInput Interface Props
- */
-const manageClasses = (props) => {
-    props.classCollection.add('mg-c-input');
-    if (props.labelOnTop)
-        props.classCollection.add('mg-c-input--label-on-top');
-    else
-        props.classCollection.delete('mg-c-input--label-on-top');
-    if (props.readonly)
-        props.classCollection.add('mg-c-input--readonly');
-    else
-        props.classCollection.delete('mg-c-input--readonly');
-    widths.forEach(width => {
-        props.classCollection.delete(`mg-c-input--width-${width}`);
-    });
-    if (props.mgWidth !== undefined)
-        props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);
-};
-/**
- * Check props configuration
- * @param props - MgInput Interface Props
- */
-const checkPropsConfig = (props) => {
-    if (!Be(props.identifier)) {
-        throw new Error('<mg-input> prop "identifier" is required.');
-    }
-    if (!Be(props.label)) {
-        throw new Error('<mg-input> prop "label" is required.');
-    }
-    if (props.labelOnTop && props.labelHide) {
-        throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
-    }
-    if (!tooltipPositions.includes(props.tooltipPosition)) {
-        throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}`);
-    }
-};
-/**
- * Get tagname
- * @param isFieldset - is fieldset
- * @returns tag name
- */
-const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' : 'fieldset');
-/**
- * MgInput Interface
- */
-/**
- * Get input template
- * @param props - MgInput Interface Props
- * @param children - Represent scoped elements
- * @param utils - Stencil.js utils
- * @returns input template
- */
-const MgInput = (props, children, utils) => {
-    /**
-     * Check props config
-     */
-    checkPropsConfig(props);
-    /**
-     * Set readonly value
-     */
-    if (props.readonlyValue === undefined)
-        props.readonlyValue = props.value;
-    /**
-     * Component classes
-     */
-    manageClasses(props);
-    /**
-     * a11y IDs
-     */
-    const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
-    // Help text
-    const helpTextId = `${props.identifier}-help-text`;
-    if (typeof props.helpText === 'string' && props.helpText !== '') {
-        ariaDescribedbyIDs.add(helpTextId);
-    }
-    // Error Message
-    const helpTextErrorId = `${props.identifier}-error`;
-    if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
-        ariaDescribedbyIDs.add(helpTextErrorId);
-    }
-    /**
-     * Return template
-     *
-     * +--------+---------+--------------+---------+
-     * |  label | tooltip | input        | tooltip |
-     * |--------+---------+--------------+---------+
-     * |                  | nb Char Left           |
-     * |                  +------------------------+
-     * |                  | Help Text              |
-     * |                  +------------------------+
-     * |                  | Error                  |
-     * +------------------+------------------------+
-     *
-     * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
-     */
-    const TagName = getTagName(props.isFieldset, props.readonly);
-    /**
-     * Get tooltip node
-     * @returns mg-tooltip
-     */
-    const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
-        h("mg-icon", { icon: "info-circle" })));
-    return (h(TagName, { class: props.classCollection.join() },
-        h("div", { class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide } },
-            h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label),
-            props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()),
-        props.readonly ? (h("div", { class: "mg-c-input__input-container" },
-            Array.isArray(props.readonlyValue) ? (h("ul", null, props.readonlyValue.map(value => (h("li", { key: value },
-                h("strong", null, value)))))) : (h("strong", null, props.readonlyValue)),
-            children.filter(child => Object.values(child).includes('append-input')))) : (h("div", { class: "mg-c-input__input-container" },
-            h("div", { class: { 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined } },
-                applyAriadescribedBy(children, ariaDescribedbyIDs, utils),
-                props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && getTooltip()),
-            props.helpText && h("div", { id: helpTextId, class: "mg-c-input__help-text", innerHTML: props.helpText }),
-            props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-c-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
-};
-
-export { Handler as H, MgInput as M };
-
-//# sourceMappingURL=MgInput.js.map

package/dist/components/MgInput.js.map

@@ -1 +0,0 @@
-{"file":"MgInput.js","mappings":"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","names":["isValidString"],"sources":["src/components/molecules/inputs/MgInput.conf.ts","src/components/molecules/inputs/MgInput.tsx"],"sourcesContent":["import type { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\nimport type { ClassList } from '@mgdis/stencil-helpers';\n\n/**\n * MgInput component props\n */\nexport interface MgInputProps {\n  // Global\n  identifier: string;\n  classCollection: ClassList;\n  // Label\n  label: string;\n  labelOnTop: boolean;\n  labelHide: boolean;\n  isFieldset: MgInputTitle['isLegend'];\n  // Input\n  value: string;\n  readonlyValue: string | string[];\n  required: boolean;\n  readonly: boolean;\n  mgWidth: Width;\n  disabled: boolean;\n  // Tooltip\n  tooltip: string;\n  tooltipPosition: TooltipPosition;\n  // Help Text\n  helpText: string;\n  // Error Message\n  errorMessage: string;\n  // ariaDescribedbyIDs\n  ariaDescribedbyIDs: string[];\n}\n/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/**\n * Available handlers\n */\nexport enum Handler {\n  BLUR = 'blur',\n  FOCUS = 'focus',\n}\n\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n","import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, tooltipPositions, type MgInputProps } from './MgInput.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * Apply in all input child node the aria-describedby attribute\n * @param children - Represent scoped elements\n * @param ariaDescribedbyIDs - List of IDs\n * @param utils - Stencil.js utils\n * @returns Children with aria-describedby attribute\n */\nconst applyAriadescribedBy = (children: VNode[], ariaDescribedbyIDs: Set<string>, utils: FunctionalUtilities): VNode[] =>\n  utils.map(children, child => {\n    if (['input', 'select', 'textarea'].includes(child.vtag as string)) {\n      return {\n        ...child,\n        vattrs: {\n          ...child.vattrs,\n          'aria-describedby': [...ariaDescribedbyIDs].join(' '),\n        },\n      };\n    }\n\n    // we recursively apply ariadescribedBy attributes to child input nodes if exists\n    if (child.vchildren === null) return { ...child };\n    return {\n      ...child,\n      vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils),\n    };\n  });\n\n/**\n * Add classes based on props\n * @param props - MgInput Interface Props\n */\nconst manageClasses = (props: MgInputProps): void => {\n  props.classCollection.add('mg-c-input');\n\n  if (props.labelOnTop) props.classCollection.add('mg-c-input--label-on-top');\n  else props.classCollection.delete('mg-c-input--label-on-top');\n\n  if (props.readonly) props.classCollection.add('mg-c-input--readonly');\n  else props.classCollection.delete('mg-c-input--readonly');\n\n  widths.forEach(width => {\n    props.classCollection.delete(`mg-c-input--width-${width}`);\n  });\n  if (props.mgWidth !== undefined) props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);\n};\n\n/**\n * Check props configuration\n * @param props - MgInput Interface Props\n */\nconst checkPropsConfig = (props: MgInputProps): void => {\n  if (!isValidString(props.identifier)) {\n    throw new Error('<mg-input> prop \"identifier\" is required.');\n  }\n  if (!isValidString(props.label)) {\n    throw new Error('<mg-input> prop \"label\" is required.');\n  }\n  if (props.labelOnTop && props.labelHide) {\n    throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n  }\n  if (!tooltipPositions.includes(props.tooltipPosition)) {\n    throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}`);\n  }\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: MgInputProps['isFieldset'], readOnly: MgInputProps['readonly']): string => (!isFieldset || readOnly ? 'div' : 'fieldset');\n\n/**\n * MgInput Interface\n */\n\n/**\n * Get input template\n * @param props - MgInput Interface Props\n * @param children - Represent scoped elements\n * @param utils - Stencil.js utils\n * @returns input template\n */\nexport const MgInput: FunctionalComponent<MgInputProps> = (props: MgInputProps, children: VNode[], utils: FunctionalUtilities): VNode[] => {\n  /**\n   * Check props config\n   */\n  checkPropsConfig(props);\n\n  /**\n   * Set readonly value\n   */\n  if (props.readonlyValue === undefined) props.readonlyValue = props.value;\n\n  /**\n   * Component classes\n   */\n  manageClasses(props);\n\n  /**\n   * a11y IDs\n   */\n  const ariaDescribedbyIDs: Set<string> = new Set(props.ariaDescribedbyIDs);\n\n  // Help text\n  const helpTextId = `${props.identifier}-help-text`;\n  if (typeof props.helpText === 'string' && props.helpText !== '') {\n    ariaDescribedbyIDs.add(helpTextId);\n  }\n\n  // Error Message\n  const helpTextErrorId = `${props.identifier}-error`;\n  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {\n    ariaDescribedbyIDs.add(helpTextErrorId);\n  }\n\n  /**\n   * Return template\n   *\n   * +--------+---------+--------------+---------+\n   * |  label | tooltip | input        | tooltip |\n   * |--------+---------+--------------+---------+\n   * |                  | nb Char Left           |\n   * |                  +------------------------+\n   * |                  | Help Text              |\n   * |                  +------------------------+\n   * |                  | Error                  |\n   * +------------------+------------------------+\n   *\n   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change\n   */\n\n  const TagName = getTagName(props.isFieldset, props.readonly);\n\n  /**\n   * Get tooltip node\n   * @returns mg-tooltip\n   */\n  const getTooltip = (): VNode[] => (\n    <mg-tooltip identifier={`${props.identifier}-tooltip`} message={props.tooltip}>\n      <mg-icon icon=\"info-circle\"></mg-icon>\n    </mg-tooltip>\n  );\n\n  return (\n    <TagName class={props.classCollection.join()}>\n      <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide }}>\n        <mg-input-title identifier={props.identifier} readonly={props.readonly} required={props.required && !props.disabled && !props.readonly} is-legend={props.isFieldset}>\n          {props.label}\n        </mg-input-title>\n        {props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()}\n      </div>\n      {props.readonly ? (\n        <div class=\"mg-c-input__input-container\">\n          {Array.isArray(props.readonlyValue) ? (\n            <ul>\n              {props.readonlyValue.map(value => (\n                <li key={value}>\n                  <strong>{value}</strong>\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <strong>{props.readonlyValue}</strong>\n          )}\n          {children.filter(child => Object.values(child).includes('append-input'))}\n        </div>\n      ) : (\n        <div class=\"mg-c-input__input-container\">\n          <div class={{ 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined }}>\n            {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n            {props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && getTooltip()}\n          </div>\n          {props.helpText && <div id={helpTextId} class=\"mg-c-input__help-text\" innerHTML={props.helpText}></div>}\n          {props.errorMessage && !props.readonly && !props.disabled && (\n            <div id={helpTextErrorId} class=\"mg-c-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n          )}\n        </div>\n      )}\n    </TagName>\n  );\n};\n"],"version":3}