npm - @mgdis/mg-components - Versions diffs - 5.16.0 → 5.17.0 - Mend

@mgdis/mg-components 5.16.0 → 5.17.0

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

Files changed (462) hide show

package/dist/components/MgInput.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"MgInput.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/MgInput.conf.ts","src/components/molecules/inputs/MgInput.tsx"],"sourcesContent":["/**\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 */\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","import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, Width } from './MgInput.conf';\nimport { ClassList } from '../../../utils/components.utils';\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-input');\n\n if (props.labelOnTop) props.classCollection.add('mg-input--label-on-top');\n else props.classCollection.delete('mg-input--label-on-top');\n\n if (props.readonly) props.classCollection.add('mg-input--readonly');\n else props.classCollection.delete('mg-input--readonly');\n\n widths.forEach(width => {\n props.classCollection.delete(`mg-input--width-${width}`);\n });\n if (props.mgWidth !== undefined) props.classCollection.add(`mg-input--width-${props.mgWidth}`);\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: boolean): string => (isFieldset ? 'fieldset' : 'div');\n\n/**\n * MgInput Interface\n */\ninterface MgInputProps {\n // Global\n identifier: string;\n classCollection: ClassList;\n // Label\n label: string;\n labelOnTop: boolean;\n labelHide: boolean;\n isFieldset: boolean;\n // Input\n value: string;\n readonlyValue: string;\n required: boolean;\n readonly: boolean;\n mgWidth: Width;\n disabled: boolean;\n // Tooltip\n tooltip: string;\n // Help Text\n helpText: string;\n // Error Message\n errorMessage: string;\n // ariaDescribedbyIDs\n ariaDescribedbyIDs: string[];\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 required properties\n */\n if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {\n throw new Error('<mg-input> prop \"identifier\" is required.');\n }\n if (typeof props.label !== 'string' || props.label.trim() === '') {\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\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 | 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: string = getTagName(props.isFieldset);\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 /**\n * Get input title (label) node\n * Display asterisk only if not disabled and not readonly\n * @returns mg-input-title\n */\n const getInputTitle = (): VNode[] => (\n <mg-input-title\n identifier={props.identifier}\n class={props.labelHide ? 'sr-only' : undefined}\n required={props.required && !props.disabled && !props.readonly}\n is-legend={props.isFieldset}\n >\n {props.label}\n </mg-input-title>\n );\n\n return (\n <TagName class={props.classCollection.join()}>\n {props.labelOnTop ? (\n <div class=\"mg-input__title\">\n {getInputTitle()}\n {!props.readonly && props.tooltip && getTooltip()}\n </div>\n ) : (\n getInputTitle()\n )}\n {props.readonly ? (\n <div class=\"mg-input__input-container\">\n <strong>{props.readonlyValue}</strong>\n {children.filter(child => child.$name$ === 'append-input')}\n </div>\n ) : (\n <div class=\"mg-input__input-container\">\n <div class={{ 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined }}>\n {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n {!props.labelOnTop && props.tooltip && getTooltip()}\n </div>\n {props.helpText && <div id={helpTextId} class=\"mg-input__help-text\" innerHTML={props.helpText}></div>}\n {props.errorMessage && !props.readonly && !props.disabled && (\n <div id={helpTextErrorId} class=\"mg-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n )}\n </div>\n )}\n </TagName>\n );\n};\n"],"version":3}

package/dist/components/components.utils.js CHANGED Viewed

@@ -128,3 +128,5 @@ const getChildWindows = (localWindow, windows = []) => {
 };
 export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, getWindows as g, isTagName as i };
+//# sourceMappingURL=components.utils.js.map

package/dist/components/components.utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"components.utils.js","mappings":"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","names":[],"sources":["src/utils/components.utils.ts"],"sourcesContent":["/**\n * Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n */\nexport const createID = (prefix = '', length = 10): string => {\n const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n const charsLength = chars.length;\n\n let ID = '';\n let now = Date.now();\n while (length > 0) {\n now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n const index = now % charsLength;\n ID += chars.charAt(index);\n length--;\n }\n return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/**\n * Class to manage component classlist\n * Set() are not working when imported in project\n */\nexport class ClassList {\n /**\n * Available classes\n */\n classes: string[];\n\n constructor(classlist: string[] = []) {\n this.classes = classlist;\n }\n\n /**\n * Add class\n * @param className - class name to add\n */\n add = (className: string): void => {\n if (!this.has(className)) {\n this.classes.push(className);\n }\n };\n\n /**\n * Delete class\n * @param className - class name to delete\n */\n delete = (className: string): void => {\n const index = this.classes.indexOf(className);\n if (index > -1) {\n this.classes.splice(index, 1);\n }\n };\n\n /**\n * Check if class exist in list\n * @param className - class name to check\n * @returns class name is in the list\n */\n has = (className: string): boolean => {\n return this.classes.includes(className);\n };\n\n /**\n * Join classes seperated by spaces\n * @returns joined values\n */\n join = (): string => {\n return this.classes.join(' ');\n };\n}\n\n/**\n * Check if all items are string\n * @param items - items to check\n * @returns all items are string\n */\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/**\n * Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n */\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/**\n * Focusable elements query selector\n */\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/**\n * Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n */\nexport const getWindows = (localWindow: Window): Window[] => {\n const parentWindows = getParentWindows(localWindow);\n const childWindows = getChildWindows(localWindow);\n return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/**\n * Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n // Check if is in iframe\n if (localWindow.self !== localWindow.top) {\n // Check if we have permission to access parent\n try {\n const parentWindow: Window = localWindow.parent;\n windows.push(parentWindow);\n return getParentWindows(parentWindow, windows);\n } catch (err) {\n console.error('Different hosts between iframes:', err);\n return windows;\n }\n }\n return windows;\n};\n\n/**\n * Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n if (localWindow.frames.length > 0) {\n for (const childWindow of Array.from(localWindow.frames)) {\n windows.push(childWindow);\n getChildWindows(childWindow, windows);\n }\n }\n return windows;\n};\n"],"version":3}

package/dist/components/index.d.ts CHANGED Viewed

@@ -1,39 +1,8 @@
-/* MgComponents custom elements */
-export { MgActionMore as MgActionMore } from '../types/components/molecules/mg-action-more/mg-action-more';
-export { MgBadge as MgBadge } from '../types/components/atoms/mg-badge/mg-badge';
-export { MgButton as MgButton } from '../types/components/atoms/mg-button/mg-button';
-export { MgCard as MgCard } from '../types/components/atoms/mg-card/mg-card';
-export { MgCharacterLeft as MgCharacterLeft } from '../types/components/atoms/mg-character-left/mg-character-left';
-export { MgDetails as MgDetails } from '../types/components/molecules/mg-details/mg-details';
-export { MgDivider as MgDivider } from '../types/components/atoms/mg-divider/mg-divider';
-export { MgForm as MgForm } from '../types/components/molecules/mg-form/mg-form';
-export { MgIcon as MgIcon } from '../types/components/atoms/mg-icon/mg-icon';
-export { MgIllustratedMessage as MgIllustratedMessage } from '../types/components/molecules/mg-illustrated-message/mg-illustrated-message';
-export { MgInputCheckbox as MgInputCheckbox } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox';
-export { MgInputCheckboxPaginated as MgInputCheckboxPaginated } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated';
-export { MgInputDate as MgInputDate } from '../types/components/molecules/inputs/mg-input-date/mg-input-date';
-export { MgInputNumeric as MgInputNumeric } from '../types/components/molecules/inputs/mg-input-numeric/mg-input-numeric';
-export { MgInputPassword as MgInputPassword } from '../types/components/molecules/inputs/mg-input-password/mg-input-password';
-export { MgInputRadio as MgInputRadio } from '../types/components/molecules/inputs/mg-input-radio/mg-input-radio';
-export { MgInputSelect as MgInputSelect } from '../types/components/molecules/inputs/mg-input-select/mg-input-select';
-export { MgInputText as MgInputText } from '../types/components/molecules/inputs/mg-input-text/mg-input-text';
-export { MgInputTextarea as MgInputTextarea } from '../types/components/molecules/inputs/mg-input-textarea/mg-input-textarea';
-export { MgInputTitle as MgInputTitle } from '../types/components/atoms/mg-input-title/mg-input-title';
-export { MgInputToggle as MgInputToggle } from '../types/components/molecules/inputs/mg-input-toggle/mg-input-toggle';
-export { MgItemMore as MgItemMore } from '../types/components/molecules/mg-item-more/mg-item-more';
-export { MgMenu as MgMenu } from '../types/components/molecules/menu/mg-menu/mg-menu';
-export { MgMenuItem as MgMenuItem } from '../types/components/molecules/menu/mg-menu-item/mg-menu-item';
-export { MgMessage as MgMessage } from '../types/components/molecules/mg-message/mg-message';
-export { MgModal as MgModal } from '../types/components/molecules/mg-modal/mg-modal';
-export { MgPagination as MgPagination } from '../types/components/molecules/mg-pagination/mg-pagination';
-export { MgPanel as MgPanel } from '../types/components/molecules/mg-panel/mg-panel';
-export { MgPopover as MgPopover } from '../types/components/molecules/mg-popover/mg-popover';
-export { MgPopoverContent as MgPopoverContent } from '../types/components/molecules/mg-popover/mg-popover-content/mg-popover-content';
-export { MgSkipLinks as MgSkipLinks } from '../types/components/molecules/mg-skip-links/mg-skip-links';
-export { MgTabs as MgTabs } from '../types/components/molecules/mg-tabs/mg-tabs';
-export { MgTag as MgTag } from '../types/components/atoms/mg-tag/mg-tag';
-export { MgTooltip as MgTooltip } from '../types/components/atoms/mg-tooltip/mg-tooltip';
-export { MgTooltipContent as MgTooltipContent } from '../types/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content';
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
 /**
  * Used to manually set the base path where assets can be found.
@@ -62,4 +31,3 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-export * from '../types';

package/dist/components/index.js CHANGED Viewed

@@ -1,36 +1,3 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-export { MgActionMore, defineCustomElement as defineCustomElementMgActionMore } from './mg-action-more.js';
-export { MgBadge, defineCustomElement as defineCustomElementMgBadge } from './mg-badge.js';
-export { MgButton, defineCustomElement as defineCustomElementMgButton } from './mg-button.js';
-export { MgCard, defineCustomElement as defineCustomElementMgCard } from './mg-card.js';
-export { MgCharacterLeft, defineCustomElement as defineCustomElementMgCharacterLeft } from './mg-character-left.js';
-export { MgDetails, defineCustomElement as defineCustomElementMgDetails } from './mg-details.js';
-export { MgDivider, defineCustomElement as defineCustomElementMgDivider } from './mg-divider.js';
-export { MgForm, defineCustomElement as defineCustomElementMgForm } from './mg-form.js';
-export { MgIcon, defineCustomElement as defineCustomElementMgIcon } from './mg-icon.js';
-export { MgIllustratedMessage, defineCustomElement as defineCustomElementMgIllustratedMessage } from './mg-illustrated-message.js';
-export { MgInputCheckbox, defineCustomElement as defineCustomElementMgInputCheckbox } from './mg-input-checkbox.js';
-export { MgInputCheckboxPaginated, defineCustomElement as defineCustomElementMgInputCheckboxPaginated } from './mg-input-checkbox-paginated.js';
-export { MgInputDate, defineCustomElement as defineCustomElementMgInputDate } from './mg-input-date.js';
-export { MgInputNumeric, defineCustomElement as defineCustomElementMgInputNumeric } from './mg-input-numeric.js';
-export { MgInputPassword, defineCustomElement as defineCustomElementMgInputPassword } from './mg-input-password.js';
-export { MgInputRadio, defineCustomElement as defineCustomElementMgInputRadio } from './mg-input-radio.js';
-export { MgInputSelect, defineCustomElement as defineCustomElementMgInputSelect } from './mg-input-select.js';
-export { MgInputText, defineCustomElement as defineCustomElementMgInputText } from './mg-input-text.js';
-export { MgInputTextarea, defineCustomElement as defineCustomElementMgInputTextarea } from './mg-input-textarea.js';
-export { MgInputTitle, defineCustomElement as defineCustomElementMgInputTitle } from './mg-input-title.js';
-export { MgInputToggle, defineCustomElement as defineCustomElementMgInputToggle } from './mg-input-toggle.js';
-export { MgItemMore, defineCustomElement as defineCustomElementMgItemMore } from './mg-item-more.js';
-export { MgMenu, defineCustomElement as defineCustomElementMgMenu } from './mg-menu.js';
-export { MgMenuItem, defineCustomElement as defineCustomElementMgMenuItem } from './mg-menu-item.js';
-export { MgMessage, defineCustomElement as defineCustomElementMgMessage } from './mg-message.js';
-export { MgModal, defineCustomElement as defineCustomElementMgModal } from './mg-modal.js';
-export { MgPagination, defineCustomElement as defineCustomElementMgPagination } from './mg-pagination.js';
-export { MgPanel, defineCustomElement as defineCustomElementMgPanel } from './mg-panel.js';
-export { MgPopover, defineCustomElement as defineCustomElementMgPopover } from './mg-popover.js';
-export { MgPopoverContent, defineCustomElement as defineCustomElementMgPopoverContent } from './mg-popover-content.js';
-export { MgSkipLinks, defineCustomElement as defineCustomElementMgSkipLinks } from './mg-skip-links.js';
-export { MgTabs, defineCustomElement as defineCustomElementMgTabs } from './mg-tabs.js';
-export { MgTag, defineCustomElement as defineCustomElementMgTag } from './mg-tag.js';
-export { MgTooltip, defineCustomElement as defineCustomElementMgTooltip } from './mg-tooltip.js';
-export { MgTooltipContent, defineCustomElement as defineCustomElementMgTooltipContent } from './mg-tooltip-content.js';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/index2.js CHANGED Viewed

@@ -263,3 +263,5 @@ const messages = { en, fr };
 const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
 export { localeCurrency as a, localeNumber as b, dateRegExp as d, initLocales as i, localeDate as l };
+//# sourceMappingURL=index2.js.map

package/dist/components/index2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index2.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;MAOa,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,QAAgB;EAC7E,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvF,EAAE;AAEF;;;;;;MAMa,YAAY,GAAG,CAAC,MAAc,EAAE,MAAc;EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,EAAE;AAEF;;;MAGa,UAAU,GAAG,gDAAgD;AAE1E;;;;;;MAMa,UAAU,GAAG,CAAC,IAAY,EAAE,MAAc;EACrD,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACrE,OAAO,EAAE,CAAC;GACX;EACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,EAAE;AAEF;;;;;;;;AAQO,MAAM,iBAAiB,GAAG,CAAC,OAAoB,EAAE,QAAiB,EAAE,aAAqB;;EAE9F,MAAM,oBAAoB,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpE,MAAM,WAAW,GAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,CAAC,CAAC;EAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,IAAI,aAAa,CAAC;;EAE7F,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;;EAE/C,OAAO;IACL,MAAM;IACN,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC;;ACvDD,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAG,CAAC,OAAoB,KAA4D,iBAAiB,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa;;;;","names":[],"sources":["src/utils/locale.utils.ts","src/locales/index.ts"],"sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n return '';\n }\n return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n // Get local\n const closestLangAttribute: HTMLElement = element.closest('[lang]');\n const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n // Only keep first subtag\n const localeSubtag = locale.split('-').shift();\n // Return\n return {\n locale,\n messages: messages[localeSubtag] || messages[defaultLocale],\n };\n};\n","import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { getLocaleMessages } from '../utils/locale.utils';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = (element: HTMLElement): { locale: string; messages: Record<string, unknown> } => getLocaleMessages(element, messages, defaultLocale);\n"],"version":3}

package/dist/components/mg-action-more.js CHANGED Viewed

@@ -40,7 +40,7 @@ const isMgActionMoreIcon = (prop) => {
   const icon = prop;
   return typeof icon === 'object' && typeof icon.icon === 'string';
 };
-const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -81,7 +81,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.expanded = false;
       customHandler(event);
     };
-    this.icon = { icon: 'ellipsis' };
+    this.icon = undefined;
     this.button = { variant: 'flat', isIcon: true };
     this.items = undefined;
     this.displayChevron = undefined;
@@ -91,6 +91,9 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (newValue && !isMgActionMoreIcon(newValue)) {
       throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
     }
+    else if (!Boolean(newValue === null || newValue === void 0 ? void 0 : newValue.icon) && Boolean(this.button.isIcon)) {
+      this.icon = { icon: 'ellipsis' };
+    }
   }
   validateButton(newValue) {
     if (newValue && !isMgActionMoreButton(newValue)) {
@@ -134,7 +137,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
           'mg-a11y-animation': true,
         } }, h("mg-icon", { icon: "chevron-down", size: "small" })));
     }
-    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
       var _a;
       return (
       // eslint-disable-next-line react/jsx-no-bind
@@ -150,11 +153,16 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }; }
   static get style() { return mgActionMoreCss; }
 }, [1, "mg-action-more", {
-    "icon": [16],
+    "icon": [1040],
     "button": [16],
     "items": [16],
     "displayChevron": [4, "display-chevron"],
     "expanded": [32]
+  }, undefined, {
+    "icon": ["validateIcon"],
+    "button": ["validateButton"],
+    "items": ["validateItems"],
+    "displayChevron": ["validateDisplayChevron"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -215,3 +223,5 @@ const MgActionMore = MgActionMore$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgActionMore, defineCustomElement };
+//# sourceMappingURL=mg-action-more.js.map

package/dist/components/mg-action-more.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-action-more.js","mappings":"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","names":["MgActionMore"],"sources":["src/components/molecules/mg-action-more/mg-action-more.scss?tag=mg-action-more&encapsulation=shadow","src/components/molecules/mg-action-more/mg-action-more.tsx"],"sourcesContent":["@import '../../../styles/a11y.scss';\n@import '../../../styles/mixins/mg-icon-animation.scss';\n\n:host {\n --mg-popover-padding-vertical: 1rem;\n --mg-popover-padding-horizontal: 0;\n --mg-popover-max-width: unset;\n}\n\n.mg-action-more__chevron {\n @include rotate('.mg-action-more__chevron', 200ms);\n}\n","import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreMessageType } from './mg-action-more.conf';\nimport { initLocales } from '../../../locales';\nimport { Status } from '../menu/mg-menu-item/mg-menu-item.conf';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { createID } from '../../../utils/components.utils';\n\n/**\n * MgActionMore['items'] type guard\n * @param prop - commponent items prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreItems = (prop: unknown): prop is MgActionMoreItemType[] => {\n const items = prop as MgActionMoreItemType[];\n return typeof items === 'object' && items.every(item => typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function');\n};\n\n/**\n * MgActionMore['button'] type guard\n * @param prop - commponent button prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreButton = (prop: unknown): prop is MgActionMoreButtonType => {\n const button = prop as MgActionMoreButtonType;\n return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';\n};\n\n/**\n * MgActionMore['icon'] type guard\n * @param prop - commponent icon prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreIcon = (prop: unknown): prop is MgActionMoreIconType => {\n const icon = prop as MgActionMoreIconType;\n return typeof icon === 'object' && typeof icon.icon === 'string';\n};\n\n@Component({\n tag: 'mg-action-more',\n styleUrl: 'mg-action-more.scss',\n shadow: true,\n})\nexport class MgActionMore {\n /************\n * Internal *\n ************/\n private readonly name = 'mg-action-more';\n private readonly mgPopoverIdentifier = createID(this.name);\n private messages: MgActionMoreMessageType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgActionMoreElement;\n\n /**\n * Define displaied icon\n */\n @Prop({ mutable: true }) icon: MgActionMoreIconType;\n @Watch('icon')\n validateIcon(newValue: MgActionMore['icon']): void {\n if (newValue && !isMgActionMoreIcon(newValue)) {\n throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);\n } else if (!Boolean(newValue?.icon) && Boolean(this.button.isIcon)) {\n this.icon = { icon: 'ellipsis' };\n }\n }\n\n /**\n * Define button properties\n */\n @Prop() button: MgActionMoreButtonType = { variant: 'flat', isIcon: true };\n @Watch('button')\n validateButton(newValue: MgActionMore['button']): void {\n if (newValue && !isMgActionMoreButton(newValue)) {\n throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);\n }\n }\n\n /**\n * Define the menu-items elements\n */\n @Prop() items!: MgActionMoreItemType[];\n @Watch('items')\n validateItems(newValue: MgActionMore['items']): void {\n if (!isMgActionMoreItems(newValue)) {\n throw new Error(`<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`);\n }\n }\n\n /**\n * Define if chevron is display\n */\n @Prop() displayChevron: boolean;\n @Watch('displayChevron')\n validateDisplayChevron(newValue: MgActionMore['displayChevron']): void {\n if (newValue && this.button.isIcon === true) {\n throw new Error(`<${this.name}> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`);\n }\n }\n /**\n * Menu expanded state\n */\n @State() expanded = false;\n\n /************\n * Methods *\n ***********/\n\n /**\n * Toogle expanded props\n */\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /**\n * Handle popover display change value\n * @param event - display change updated value\n */\n private handleDisplayChange = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /**\n * Button click handler\n */\n private handleButton = (): void => {\n this.toggleExpanded();\n };\n\n /**\n * Item click handler\n * @param event - click event\n * @param customHandler - item['mouseEventHandler']\n */\n private handleItemClick = (event: MouseEvent, customHandler: MgActionMoreItemType['mouseEventHandler']) => {\n this.expanded = false;\n customHandler(event);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n this.messages = initLocales(this.element).messages.actionMore as MgActionMoreMessageType;\n this.validateItems(this.items);\n this.validateButton(this.button);\n this.validateIcon(this.icon);\n this.validateDisplayChevron(this.displayChevron);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const buttonLabel = this.button.label || this.messages.label;\n const buttonContent = [buttonLabel];\n\n if (!this.button.isIcon && this.displayChevron) {\n buttonContent.push(\n <span\n class={{\n [`${this.name}__chevron`]: true,\n [`${this.name}__chevron--rotate`]: this.expanded === true,\n 'mg-a11y-animation': true,\n }}\n >\n <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n </span>,\n );\n }\n\n return (\n <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n <span class=\"mg-action-more\">\n <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n <mg-button variant={this.button.variant} isIcon={this.button.isIcon} type=\"button\" label={buttonLabel} onClick={this.handleButton}>\n {this.icon && <mg-icon {...this.icon}></mg-icon>}\n {!this.button.isIcon && buttonContent}\n </mg-button>\n <div slot=\"content\">\n <mg-menu direction={Direction.VERTICAL} label={this.messages.label}>\n {this.items.map(item => (\n // eslint-disable-next-line react/jsx-no-bind\n <mg-menu-item key={item.label} status={item.status || Status.VISIBLE} onClick={e => this.handleItemClick(e, item.mouseEventHandler)} href={item.href}>\n {item.icon && <mg-icon icon={item.icon} slot=\"image\"></mg-icon>}\n <span slot=\"label\">{item.label}</span>\n {item.badge?.label && <mg-badge label={item.badge.label} value={item.badge.value} slot=\"information\" variant=\"text-color\"></mg-badge>}\n </mg-menu-item>\n ))}\n </mg-menu>\n </div>\n </mg-popover>\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-badge.js CHANGED Viewed

@@ -4,3 +4,5 @@ const MgBadge = MgBadge$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgBadge, defineCustomElement };
+//# sourceMappingURL=mg-badge.js.map

package/dist/components/mg-badge.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"mg-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-badge2.js CHANGED Viewed

@@ -8,7 +8,7 @@ const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'
 const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge.mg-badge--text-color{background-color:currentColor;border-color:currentColor}.mg-badge.mg-badge--text-color .mg-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-badge.mg-badge--text-color.mg-badge--outline{background-color:transparent}.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value{color:currentColor}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
-const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -80,6 +80,11 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "outline": [4],
     "classCollection": [32]
+  }, undefined, {
+    "value": ["validateValue"],
+    "label": ["validateLabel"],
+    "variant": ["validateVariant"],
+    "outline": ["validateOutline"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -97,3 +102,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgBadge as M, defineCustomElement as d };
+//# sourceMappingURL=mg-badge2.js.map

package/dist/components/mg-badge2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-badge2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACH/G,MAAM,UAAU,GAAG,gkFAAgkF;;MCQtkF,OAAO;;;;;;;;;IAMD,iBAAY,GAAG,mBAAmB,CAAC;;;mBAgCf,QAAQ,CAAC,CAAC,CAAC;;2BA0BV,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;;EA/CjE,aAAa,CAAC,QAA0B;IACtC,IAAI,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,KAAK,IAAI,EAAE;MACxD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;KACtF;GACF;EAQD,aAAa,CAAC,QAA0B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1D,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;GACF;EAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;IACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;OACtD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;KACnD;GACF;EAOD,eAAe,CAAC,QAA4B;IAC1C,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;MACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACrD;;;;EAUD,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACpC;;;;;EAMD,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACjD,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","src/components/atoms/mg-badge/mg-badge.scss?tag=mg-badge&encapsulation=shadow","src/components/atoms/mg-badge/mg-badge.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'] as const;\n\n/**\n * Variant type from variants\n */\nexport type BadgeVariantType = (typeof variants)[number];\n","@import '../../../styles/a11y.scss';\n\n/* Variables */\n$mg-badge-border-width: 0.1rem;\n\n/* Mixins */\n@mixin badge-variant($name, $backgroundColor, $color) {\n &.mg-badge--#{$name} {\n @if $name == 'text-color' {\n // Decoration\n background-color: currentColor;\n border-color: currentColor;\n .mg-badge__value {\n // Font\n color: hsl(var(--mg-badge-text-color, var(--color-light)));\n }\n } @else {\n // Decoration\n background-color: hsl(var(--color-#{$backgroundColor}));\n border-color: hsl(var(--color-#{$backgroundColor}));\n // Font\n color: hsl(var(--color-#{$color}));\n }\n\n &.mg-badge--outline {\n // Decoration\n background-color: transparent;\n // Font\n @if $name == 'text-color' {\n // Font\n .mg-badge__value {\n color: currentColor;\n }\n } @else {\n color: hsl(var(--color-#{$backgroundColor}));\n }\n }\n }\n}\n\n/* Styles */\n.mg-badge {\n // Display\n padding: 0 0.4rem;\n height: var(--mg-badge-size);\n min-width: var(--mg-badge-size);\n box-sizing: border-box;\n // Decoration\n border: $mg-badge-border-width solid;\n border-radius: calc(var(--mg-badge-size) / 2);\n // Font\n font-size: var(--mg-badge-font-size);\n font-weight: 600;\n text-align: center;\n line-height: var(--mg-badge-size);\n\n // Variant\n @include badge-variant('primary', 'dark', 'light');\n @include badge-variant('secondary', 'light', 'dark');\n @include badge-variant('success', 'success', 'dark');\n @include badge-variant('warning', 'warning', 'dark');\n @include badge-variant('danger', 'danger', 'light');\n @include badge-variant('info', 'info', 'light');\n @include badge-variant('text-color', none, 'light');\n}\n\n.mg-badge,\nmg-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n tag: 'mg-badge',\n styleUrl: 'mg-badge.scss',\n shadow: true,\n})\nexport class MgBadge {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classOutline = `mg-badge--outline`;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Badge value\n */\n @Prop() value!: string | number;\n @Watch('value')\n validateValue(newValue: MgBadge['value']): void {\n if (`${newValue}`.match(/^(\\d+\\+*|[?*!a-z])$/i) === null) {\n throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\n }\n }\n\n /**\n * Badge label. Include short description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgBadge['label']): void {\n if (typeof newValue !== 'string' || newValue.trim() === '') {\n throw new Error('<mg-badge> prop \"label\" is required.');\n }\n }\n\n /**\n * Define button variant\n */\n @Prop() variant?: BadgeVariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-badge--${newValue}`);\n }\n }\n\n /**\n * Define if button is using outline style\n */\n @Prop() outline: boolean;\n @Watch('outline')\n validateOutline(newValue: MgBadge['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-badge']);\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateValue(this.value);\n this.validateLabel(this.label);\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <span class=\"mg-badge__value\">{this.value}</span>\n <span class=\"sr-only\">{this.label}</span>\n </span>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-button.js CHANGED Viewed

@@ -4,3 +4,5 @@ const MgButton = MgButton$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgButton, defineCustomElement };
+//# sourceMappingURL=mg-button.js.map

package/dist/components/mg-button.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"mg-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-button2.js CHANGED Viewed

@@ -9,7 +9,7 @@ const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'
 const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled){background:hsl(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--link{padding:unset;min-height:unset;background:unset;border:unset;border-radius:unset;text-decoration:underline}.mg-button.mg-button--link slot{font-weight:600}.mg-button.mg-button--link:hover{text-decoration:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
-const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -162,6 +162,11 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "disableOnClick": [4, "disable-on-click"],
     "loading": [32],
     "classCollection": [32]
+  }, undefined, {
+    "variant": ["validateVariant"],
+    "fullWidth": ["validateFullWidth"],
+    "disabled": ["disabledHandler"],
+    "loading": ["loadingHandler"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -184,3 +189,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgButton as M, defineCustomElement as d };
+//# sourceMappingURL=mg-button2.js.map

package/dist/components/mg-button2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-button2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","src/components/atoms/mg-button/mg-button.scss?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n","/* Variables */\n$mg-button-border-width: 0.1rem;\n$mg-button-padding-horizontal: 1.1rem;\n$button-column-gap: 0.6rem;\n\n/* Mixins */\n@mixin style-gradient($name, $backgroundColor, $fontColor, $hasVariable: false) {\n @if $hasVariable {\n $backgroundColor: --mg-button-#{$name}-color;\n $fontColor: --mg-button-#{$name}-font-color;\n } @else {\n $backgroundColor: --color-#{$backgroundColor};\n $fontColor: --color-#{$fontColor};\n }\n .mg-button.mg-button--#{$name} {\n // Decoration\n border-color: hsl(\n var(\n #{--mg-button-#{$name}-border-color},\n (var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), calc(var(#{$backgroundColor}-l) - var(--mg-button-border-variation) * 10%))\n )\n );\n // Font\n color: hsl(var(#{$fontColor}));\n // Background\n background: linear-gradient(\n to bottom,\n hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), var(#{$backgroundColor}-l)),\n hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), calc(var(#{$backgroundColor}-l) - var(--mg-button-gradient) * 10%))\n );\n }\n // Only apply if not disabled\n :host(:hover) .mg-button--#{$name}:not(.mg-button--disabled) {\n background: hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), var(#{$backgroundColor}-l));\n }\n}\n\n@mixin font-style() {\n text-decoration: none;\n font-family: inherit;\n font-weight: var(--mg-button-font-weight, normal);\n text-align: left;\n font-size: var(--font-size);\n}\n\n:host {\n display: inline-block;\n vertical-align: middle;\n max-width: 100%;\n}\n\n:host(:focus-visible) {\n outline: 0;\n // same style as chrome\n .mg-button {\n outline-color: -webkit-focus-ring-color;\n outline-style: auto;\n outline-width: 0.2rem;\n }\n}\n\n// Only apply if not disabled\n:host(:hover) .mg-button--flat:not(.mg-button--disabled) {\n background: hsl(var(--color-dark), 0.1);\n}\n\n:host([full-width]) {\n display: block;\n}\n\n// Prevent click propagation when disabled\n:host([disabled]),\n:host([aria-disabled='true']) {\n pointer-events: none;\n}\n\n// Gradient style\n@include style-gradient('primary', null, null, true);\n@include style-gradient('secondary', null, null, true);\n@include style-gradient('danger', 'danger', 'neutral');\n@include style-gradient('danger-alt', 'neutral', 'danger');\n@include style-gradient('info', 'info', 'neutral');\n@include style-gradient('success', 'success', 'dark');\n\n/* Styles */\n.mg-button {\n // Display\n position: relative;\n display: inline-flex;\n align-items: center;\n column-gap: $button-column-gap;\n padding: calc((var(--default-size) - (2 * $mg-button-border-width) - (var(--font-size) * var(--line-height))) / 2) $mg-button-padding-horizontal;\n min-height: var(--default-size);\n box-sizing: border-box;\n // Decoration\n border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));\n border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));\n border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));\n border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));\n cursor: pointer;\n background-image: none;\n border-top-width: var(--mg-button-border-top-width, $mg-button-border-width);\n border-right-width: var(--mg-button-border-right-width, $mg-button-border-width);\n border-bottom-width: var(--mg-button-border-bottom-width, $mg-button-border-width);\n border-left-width: var(--mg-button-border-left-width, $mg-button-border-width);\n border-style: solid;\n // Font (necessary for stylesheet only)\n @include font-style();\n // Other\n touch-action: manipulation;\n\n // Disabled style\n &.mg-button--disabled {\n opacity: var(--mg-button-disabled-opacity);\n cursor: default;\n }\n\n // Icon only button\n &.mg-button--icon {\n // Display\n padding: 0;\n justify-content: center;\n width: var(--default-size);\n height: var(--default-size);\n // Decoration\n border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));\n border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));\n border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));\n border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));\n // font\n font-size: var(--font-size);\n line-height: var(--font-size);\n }\n\n // Flat variant\n &.mg-button--flat {\n background: none;\n border: none;\n }\n\n // Link variant\n &.mg-button--link {\n padding: unset;\n min-height: unset;\n background: unset;\n border: unset;\n border-radius: unset;\n text-decoration: underline;\n\n slot {\n font-weight: 600;\n }\n\n &:hover {\n text-decoration: none;\n }\n }\n\n // full-width style\n &.mg-button--full-width {\n display: flex;\n justify-content: center;\n }\n\n // loading style\n &.mg-button--loading {\n > mg-icon:first-of-type {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .mg-button__content {\n opacity: 0;\n }\n }\n\n mg-icon:only-child,\n ::slotted(mg-icon) {\n display: inline-flex;\n flex-shrink: 0;\n line-height: 1;\n margin: auto 0;\n }\n\n slot,\n ::slotted(*:not(mg-icon)) {\n // Font\n @include font-style();\n // Display\n display: flex;\n align-items: center;\n column-gap: $button-column-gap;\n }\n}\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList } from '../../../utils/components.utils';\n\n@Component({\n tag: 'mg-button',\n styleUrl: 'mg-button.scss',\n shadow: true,\n})\nexport class MgButton {\n /************\n * Internal *\n ************/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-button--disabled';\n private readonly classLoading = 'mg-button--loading';\n private readonly classFullWidth = 'mg-button--full-width';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgButtonElement;\n\n /**\n * Define button variant\n */\n @Prop() variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-button--${oldValue}`);\n }\n this.classCollection.add(`mg-button--${newValue}`);\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier: string;\n\n /**\n * aria-label\n * In case button text is not explicit enough\n */\n @Prop() label: string;\n\n /**\n * Define button type\n */\n @Prop() type: ButtonType;\n\n /**\n * Set button to full-width\n */\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /**\n * Define form id to attach button with.\n * If this attribute is not set, the <button> is associated with its ancestor <form> element.\n */\n @Prop() form: string;\n\n /**\n * Disable button\n */\n @Prop({ mutable: true }) disabled: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /**\n * Define if button is round.\n * Used for icon button.\n */\n @Prop() isIcon = false;\n\n /**\n * Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n */\n @Prop() disableOnClick = false;\n\n /**\n * Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n */\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-button']);\n\n /**\n * Emmited event when disabled change\n */\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<MgButton['disabled']>;\n\n /**\n * Trigger actions onClick event\n * @param event - click event\n */\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /**\n * Handle onKeydown event\n * @param event - keyboard event\n */\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /**\n * Handle onKeyup event\n * @param event - keyboard event\n */\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n if (this.isIcon) {\n this.classCollection.add(`mg-button--icon`);\n if (typeof this.label !== 'string' || this.label.trim() === '') {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /**\n * Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled !== undefined && this.disabled.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()} id={this.identifier}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-card.js CHANGED Viewed

@@ -4,3 +4,5 @@ const MgCard = MgCard$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgCard, defineCustomElement };
+//# sourceMappingURL=mg-card.js.map

package/dist/components/mg-card.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"mg-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-card2.js CHANGED Viewed

@@ -12,7 +12,7 @@ const variantStyles = ['bar-left', 'fill'];
 const mgCardCss = ".mg-card{position:relative;width:100%;max-width:var(--mg-card-max-width);min-width:var(--mg-card-min-width);padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-card.mg-card--info{overflow:hidden}.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-card.mg-card--info.mg-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-card.mg-card--warning{overflow:hidden}.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-card.mg-card--warning.mg-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-card.mg-card--success{overflow:hidden}.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-card.mg-card--success.mg-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-card.mg-card--danger{overflow:hidden}.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-card.mg-card--danger.mg-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-card.mg-card--app{overflow:hidden}.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-card.mg-card--app.mg-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-card__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}";
-const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -81,6 +81,9 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "variantStyle": [1025, "variant-style"],
     "classCollection": [32]
+  }, undefined, {
+    "variant": ["validateVariant"],
+    "variantStyle": ["validateVariantStyle"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -98,3 +101,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgCard as M, defineCustomElement as d };
+//# sourceMappingURL=mg-card2.js.map

package/dist/components/mg-card2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-card2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;;AAGO,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU;;ACb1D,MAAM,SAAS,GAAG,0/EAA0/E;;MCS//E,MAAM;;;;;;;;IAKA,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,IAAI,CAAC,IAAI,CAAC;;;;;IA0C/B,2BAAsB,GAAG;MAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;KACrE,CAAC;;;2BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;EAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;IAC5H,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrB,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;EAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;SACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACxH,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAClF,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;;;;;;;EAsBD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC9C;;;;;EAMD,MAAM;;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,cAAc,GAAQ,EAC5E,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-card/mg-card.conf.ts","src/components/atoms/mg-card/mg-card.scss?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = (typeof variantStyles)[number];\n","@import '../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n@function getColorPrefix($color) {\n @if $color == 'app' {\n @return 'mg-color';\n }\n @return 'color';\n}\n\n@mixin card-variants($variants...) {\n @each $variant in $variants {\n &.mg-card--#{$variant} {\n overflow: hidden;\n &.mg-card--bar-left .mg-card__bar {\n background-color: hsl(var(--#{getColorPrefix($variant)}-#{$variant}-h), var(--#{getColorPrefix($variant)}-#{$variant}-s), var(--#{getColorPrefix($variant)}-#{$variant}-l));\n }\n &.mg-card--fill {\n background-color: hsl(var(--#{getColorPrefix($variant)}-#{$variant}-h), var(--#{getColorPrefix($variant)}-#{$variant}-s), var(--mg-color-soft-l));\n }\n }\n }\n}\n\n.mg-card {\n // Display\n position: relative;\n width: 100%;\n max-width: var(--mg-card-max-width);\n min-width: var(--mg-card-min-width);\n padding: var(--mg-card-padding, var(--mg-card-padding-default));\n overflow: var(--mg-card-overflow, var(--mg-card-overflow-default));\n box-sizing: border-box;\n z-index: inherit;\n // Decoration\n background: var(--mg-card-background, var(--mg-card-background-default));\n border: var(--mg-card-border, var(--mg-card-border-default));\n border-radius: var(--mg-card-border-radius, var(--mg-card-border-radius-default));\n box-shadow: var(--mg-card-box-shadow, var(--mg-card-box-shadow-default));\n\n @include reset-slot-card-variables();\n @include card-variants('info', 'warning', 'success', 'danger', 'app');\n\n &__bar {\n position: absolute;\n top: 0;\n left: 0;\n width: 0.3rem;\n height: 100%;\n }\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n@Component({\n tag: 'mg-card',\n styleUrl: 'mg-card.scss',\n shadow: true,\n})\nexport class MgCard {\n /*************\n * Private *\n *************/\n\n private readonly name = 'mg-card';\n private readonly baseClass = this.name;\n\n /*************\n * Decorators *\n *************/\n\n /**\n * Define variant prop\n */\n @Prop() variant: undefined | VariantType;\n @Watch('variant')\n validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n if (Boolean(newValue)) {\n this.setDefaultVariantStyle();\n this.classCollection.add(`${this.baseClass}--${newValue}`);\n }\n if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n }\n\n /**\n * Define variantStyle prop\n */\n @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n @Watch('variantStyle')\n validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n else if (Boolean(newValue) && !variants.includes(this.variant))\n throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n if (Boolean(newValue)) this.classCollection.add(`${this.baseClass}--${newValue}`);\n if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList([this.baseClass]);\n\n /**\n * Methode to set default varianStyle props\n * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n */\n private setDefaultVariantStyle = (): void => {\n if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateVariantStyle(this.variantStyle);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n {this.variantStyle?.startsWith('bar-') && <span class=\"mg-card__bar\"></span>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-character-left.js CHANGED Viewed

@@ -4,3 +4,5 @@ const MgCharacterLeft = MgCharacterLeft$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgCharacterLeft, defineCustomElement };
+//# sourceMappingURL=mg-character-left.js.map

package/dist/components/mg-character-left.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"mg-character-left.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/mg-character-left2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { i as initLocales } from './index2.js';
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
-const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,6 +42,8 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "identifier": [1],
     "characters": [1],
     "maxlength": [2]
+  }, undefined, {
+    "maxlength": ["validateMaxlength"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -59,3 +61,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgCharacterLeft as M, defineCustomElement as d };
+//# sourceMappingURL=mg-character-left2.js.map

package/dist/components/mg-character-left2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-character-left2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uDAAuD;;MCQrE,eAAe;;;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;GACF;;;;;;;EASD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,2BAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAChH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-character-left/mg-character-left.scss?tag=mg-character-left&encapsulation=scoped","src/components/atoms/mg-character-left/mg-character-left.tsx"],"sourcesContent":["mg-character-left {\n display: block;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n tag: 'mg-character-left',\n styleUrl: 'mg-character-left.scss',\n scoped: true,\n})\nexport class MgCharacterLeft {\n /************\n * Internal *\n ************/\n\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgCharacterLeftElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string;\n\n /**\n * Sets the characters to count\n */\n @Prop() characters = '';\n\n /**\n * Add maximum length\n */\n @Prop() maxlength!: number;\n @Watch('maxlength')\n validateMaxlength(newValue: number): void {\n if (typeof newValue !== 'number') {\n throw new Error('<mg-character-left> prop \"maxlength\" is required.');\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateMaxlength(this.maxlength);\n this.messages = initLocales(this.element).messages;\n }\n\n /**\n * Render component\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span id={this.identifier} aria-live=\"polite\">\n <span aria-hidden=\"true\">\n {this.maxlength - this.characters.length}/{this.maxlength}\n </span>\n <span class=\"sr-only\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n </span>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-details.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
 const mgDetailsCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__toggle-icon.mg-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-details__toggle>span{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}}";
-const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -56,6 +56,10 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "toggleOpened": [1, "toggle-opened"],
     "hideSummary": [4, "hide-summary"],
     "expanded": [1028]
+  }, undefined, {
+    "toggleClosed": ["validateTitles"],
+    "toggleOpened": ["validateTitles"],
+    "expanded": ["handleExpanded"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -81,3 +85,5 @@ const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgDetails, defineCustomElement };
+//# sourceMappingURL=mg-details.js.map

package/dist/components/mg-details.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-details.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,orCAAorC;;MCO5rCA,WAAS;;;;;;;;;IAmDZ,iBAAY,GAAG;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;KACnC,CAAC;;;uBArBoB,KAAK;oBAKS,KAAK;;EAdzC,cAAc,CAAC,QAAgB;IAC7B,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACpD,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;GACF;EAYD,cAAc,CAAC,QAAiB;IAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;EAqBD,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACxC;;;;;EAMD,MAAM;IACJ,QACE,eAAS,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,IAChI,mBACE,YAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,YAAM,KAAK,EAAC,oBAAoB,IAC9B,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EAClJ,YAAM,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACvG,CACC,EACV,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails"],"sources":["src/components/molecules/mg-details/mg-details.scss?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":["@import '../../../styles/a11y.scss';\n\n.mg-details {\n summary {\n display: flex;\n align-items: baseline;\n cursor: pointer;\n }\n\n &__toggle {\n margin-left: 1.5rem;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n align-self: flex-start;\n gap: 0.6rem;\n min-height: calc(var(--font-size) * var(--line-height));\n &-icon.mg-details__toggle-icon--reverse {\n transform: rotate(180deg);\n }\n }\n\n &__details {\n margin-top: var(--mg-details-spacing);\n }\n}\n\n/* hide toggle button when < 700px */\n@media (width < 43.75rem) {\n .mg-details__toggle > span {\n @include sr-only();\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n tag: 'mg-details',\n styleUrl: 'mg-details.scss',\n shadow: true,\n})\nexport class MgDetails {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private details: HTMLDetailsElement;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Displayed title when details are closed\n */\n @Prop() toggleClosed!: string;\n\n /**\n * Displayed title when details are opened\n */\n @Prop() toggleOpened!: string;\n @Watch('toggleClosed')\n @Watch('toggleOpened')\n validateTitles(newValue: string): void {\n if (newValue === undefined || newValue.trim() === '') {\n throw new Error('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\n }\n }\n\n /**\n * Hide summary element\n */\n @Prop() hideSummary = false;\n\n /**\n * Define if details are diplayed\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: boolean): void {\n this.expandedChange.emit(newValue);\n }\n\n /**\n * Emmited event when expanded change\n */\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n /**\n * Handle details toggle\n */\n private handleToggle = (): void => {\n this.expanded = this.details.open;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n this.validateTitles(this.toggleClosed);\n this.validateTitles(this.toggleOpened);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <details class=\"mg-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary>\n <slot name=\"summary\"></slot>\n <span class=\"mg-details__toggle\">\n <mg-icon icon=\"chevron-up\" size=\"small\" class={{ 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n <span class={{ 'sr-only': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n </span>\n </summary>\n <div class=\"mg-details__details\">\n <slot name=\"details\"></slot>\n </div>\n </details>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-divider.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const mgDividerCss = ".mg-divider{margin:var(--mg-divider-vertical-spacing) auto;width:12rem;height:var(--mg-divider-thickness);background-color:var(--mg-divider-background-color)}.mg-divider.mg-divider--full{width:100%}";
-const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,3 +42,5 @@ const MgDivider = MgDivider$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgDivider, defineCustomElement };
+//# sourceMappingURL=mg-divider.js.map

package/dist/components/mg-divider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wMAAwM;;MCOhNA,WAAS;;;;;gBAQe,SAAS;;;;;;EAM5C,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OACzC,GACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDivider"],"sources":["src/components/atoms/mg-divider/mg-divider.scss?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":[".mg-divider {\n margin: var(--mg-divider-vertical-spacing) auto;\n width: 12rem;\n height: var(--mg-divider-thickness);\n background-color: var(--mg-divider-background-color);\n\n &.mg-divider--full {\n width: 100%;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'mg-divider',\n styleUrl: 'mg-divider.scss',\n shadow: true,\n})\nexport class MgDivider {\n /**************\n * Decorators *\n **************/\n\n /**\n * Define component size\n */\n @Prop() size: 'regular' | 'full' = 'regular';\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-divider': true,\n 'mg-divider--full': this.size === 'full',\n }}\n ></div>\n );\n }\n}\n"],"version":3}