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/mg-modal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-modal.js","mappings":"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","names":["MgModal"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","src/components/molecules/mg-modal/mg-modal.scss?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n","@import '../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n:host {\n // Set mg-card variables\n --mg-card-border-radius: var(--mg-modal-border-radius);\n --mg-card-padding: 1.5rem 2.5rem;\n --mg-card-border: none;\n}\n\n.mg-modal {\n // Layout\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2000;\n padding: 2rem 0;\n // Appearance\n background-color: hsl(var(--color-light), 0.85);\n\n mg-card {\n display: flex;\n width: 60rem;\n max-width: 100%;\n max-height: 100%;\n }\n\n &__dialog {\n // Layout\n display: flex;\n position: relative;\n flex-direction: column;\n align-self: center;\n row-gap: 3rem;\n height: fit-content;\n max-height: 100%;\n }\n\n &__header {\n margin-bottom: 0.5rem;\n }\n\n &__title {\n // Layout\n margin: 0;\n // Text\n font-family: var(--font-family-heading);\n font-size: var(--mg-modal-title-font-size);\n font-weight: 600;\n }\n\n &__close-button {\n float: right;\n height: var(--mg-modal-title-font-size);\n margin-top: calc((var(--default-size) - (var(--mg-modal-title-font-size) * var(--line-height))) / 2 * -1); //-6px;\n margin-right: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1); //-10px;\n }\n\n &__content {\n overflow-y: auto;\n &::slotted(*) {\n font-size: var(--mg-modal-content-font-size);\n }\n }\n\n &.mg-modal--hide {\n display: none;\n }\n\n @include reset-slot-card-variables();\n}\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n tag: 'mg-modal',\n styleUrl: 'mg-modal.scss',\n shadow: true,\n})\nexport class MgModal {\n /************\n * Internal *\n ************/\n\n // Modal focusable elements\n private modalFocusableElements: HTMLElement[] = [];\n private closeButtonElement: HTMLMgButtonElement;\n\n // Classes\n private readonly classHide = 'mg-modal--hide';\n\n // IDs\n private titleId = '';\n\n // Locales\n private messages;\n\n // body overflow default\n private bodyOverflow: string;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgModalElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-modal');\n\n /**\n * Modal dialog role.\n */\n @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n @Watch('dialogRole')\n validateDialogRole(newValue: MgModal['dialogRole']): void {\n if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n\n /**\n * Displayed modal title\n */\n @Prop() modalTitle!: string;\n @Watch('modalTitle')\n validateModalTitle(newValue: MgModal['modalTitle']): void {\n if (typeof newValue !== 'string' || newValue.trim() === '') {\n throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n }\n }\n\n /**\n * Define if modal has a cross button\n */\n @Prop() closeButton = false;\n\n /**\n * Define if modal is hidden\n */\n @Prop({ mutable: true }) hide: boolean;\n @Watch('hide')\n validateHide(newValue: MgModal['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n document.body.style.overflow = this.bodyOverflow;\n // reset focus handlers\n this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n } else if (newValue === false) {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n document.body.style.overflow = 'hidden';\n this.setFocus();\n }\n }\n\n /**\n * Define if component is using actions slot\n */\n @State() hasActions = false;\n\n /**\n * Define if component is using content slot\n */\n @State() hasContent = false;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-modal']);\n\n /**\n * Emmited event when modal is diplayed\n */\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n /**\n * Emmited event when modal is hidden\n */\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\n\n /**\n * Handle 'escape' key down\n * @param event - keydown event\n */\n @Listen('keydown', {\n target: 'window',\n })\n handleKeyDown(event: KeyboardEvent): void {\n // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n if (this.closeButton && event.key === 'Escape') {\n this.hide = true;\n }\n }\n\n /**\n * Handle last focusable element\n * @param event - keyboard event\n */\n private handleLastFocusableElement = (event): void => {\n if (event.key === 'Tab' && !event.shiftKey) {\n event.preventDefault();\n this.modalFocusableElements[0].focus();\n }\n };\n\n /**\n * Handle first focusable element\n * @param event - keyboard event\n */\n private handleFirstFocusableElement = (event): void => {\n if (event.key === 'Tab' && event.shiftKey) {\n event.preventDefault();\n this.getLastFocusableElement().focus();\n }\n };\n\n /**\n * Get last focusablmeElement\n * @returns last modal focusable element\n */\n private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n /**\n * Method to manage focus on modal focusable elements\n */\n private setFocus = (): void => {\n // Get all focusable elements\n const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n // If at least one\n if (allFocusableElements.length > 0) {\n this.modalFocusableElements = allFocusableElements.reduce((acc, focusableElement) => {\n acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n return acc;\n }, []);\n // When close button is enabled it's the first focusable element.\n if (this.closeButton && this.closeButtonElement !== undefined) {\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n // Add event listener on last element\n this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n // Add event listener on first element (case shift + tab)\n this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n }\n };\n\n /*************\n * Handlers *\n *************/\n\n /**\n * Handle close button\n */\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Store body overflow\n this.bodyOverflow = document.body.style.overflow;\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n this.titleId = `${this.identifier}-title`;\n this.validateModalTitle(this.modalTitle);\n this.validateHide(this.hide);\n this.validateDialogRole(this.dialogRole);\n }\n\n /**\n * Add observer on component to set focus when displayed\n */\n componentDidLoad(): void {\n new MutationObserver(mutationList => {\n // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n // Set focus on first element\n this.modalFocusableElements[0].focus();\n }\n }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n <mg-card>\n <div class=\"mg-modal__dialog\">\n <header class=\"mg-modal__header\">\n {this.closeButton && (\n <span class=\"mg-modal__close-button\">\n <mg-button\n identifier={`${this.identifier}-close-button`}\n is-icon\n variant=\"flat\"\n label={this.messages.modal.closeButton}\n onClick={this.handleClose}\n ref={(el: HTMLMgButtonElement) => {\n if (el !== null) {\n // store closeButton Element\n this.closeButtonElement = el;\n // add close button element to modalFocusableElements when it is render\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n }}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n <h1 class=\"mg-modal__title\" id={this.titleId}>\n {this.modalTitle}\n </h1>\n </header>\n\n {this.hasContent && (\n <article class=\"mg-modal__content\">\n <slot name=\"content\"></slot>\n </article>\n )}\n\n {this.hasActions && (\n <footer class=\"mg-modal__footer\">\n <slot name=\"actions\"></slot>\n </footer>\n )}\n </div>\n </mg-card>\n </div>\n );\n }\n}\n"],"version":3}

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

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

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

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

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

@@ -38,7 +38,7 @@ const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
  * @returns range numbers
  */
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
-const MgPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -131,6 +131,9 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "hidePageCount": [4, "hide-page-count"],
     "totalPages": [2, "total-pages"],
     "currentPage": [1538, "current-page"]
+  }, undefined, {
+    "totalPages": ["validateTotalPages"],
+    "currentPage": ["validateCurrentPage"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -178,3 +181,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgPagination as M, defineCustomElement as d };
+//# sourceMappingURL=mg-pagination2.js.map

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

@@ -0,0 +1 @@

+ {"file":"mg-pagination2.js","mappings":"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","names":[],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","src/components/molecules/mg-pagination/mg-pagination.scss?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export enum NavigationAction {\n NEXT = 'next',\n PREVIOUS = 'previous',\n}\n","@import '../../../styles/a11y.scss';\n\n$min-height: 3rem;\n$border-size: 0.3rem;\n\n.mg-pagination {\n $component: &;\n display: flex;\n align-items: center;\n flex-direction: row;\n\n mg-input-select {\n margin-right: 0.5rem;\n }\n\n mg-button {\n display: flex;\n &:first-of-type {\n margin-right: 1rem;\n }\n &:last-of-type {\n margin-left: 1rem;\n }\n }\n &#{$component}--hide-page-count mg-button {\n margin: 0;\n }\n}\n","import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '../../../utils/components.utils';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: 'mg-pagination.scss',\n shadow: true,\n})\nexport class MgPagination {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPaginationElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-pagination');\n\n /**\n * Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n */\n @Prop({ mutable: true }) label: string;\n\n /**\n * Hide navigation label\n */\n @Prop() hideNavigationLabels: boolean;\n\n /**\n * Hide select input\n */\n @Prop() hidePageCount: boolean;\n\n /**\n * Component total pages\n */\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /**\n * Component current page\n */\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /**\n * Emmited event when current page change\n */\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /**\n * Change current page from target\n * @param target - target page\n */\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * select handler\n * @param event - value change event\n */\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /**\n * Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n */\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined || this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav aria-label={this.label} id={this.identifier} class={{ 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"sr-only\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'sr-only': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -21,7 +21,7 @@ const titlePositions = ['left', 'right'];
 const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header.mg-panel__header--reverse{padding-right:0.3rem;padding-left:1rem}.mg-panel__header-title,.mg-panel__header-content{display:flex;margin:0.3rem 0}.mg-panel__header-content{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-title mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-title.mg-panel__header-title--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__collapse-button-icon.mg-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}.mg-panel ::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}";
-const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -210,6 +210,12 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "classCollection": [32],
     "isEditing": [32],
     "updatedPanelTitle": [32]
+  }, undefined, {
+    "panelTitle": ["validatePanelTitle"],
+    "titlePattern": ["validatetitlePattern"],
+    "titlePosition": ["validateTitlePosition"],
+    "expanded": ["handleExpanded"],
+    "expandToggleDisplay": ["validateExpandToggleDisplay"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -270,3 +276,5 @@ const MgPanel = MgPanel$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgPanel, defineCustomElement };
+//# sourceMappingURL=mg-panel.js.map

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

@@ -0,0 +1 @@

+ {"file":"mg-panel.js","mappings":"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","names":["MgPanel"],"sources":["src/components/molecules/mg-panel/mg-panel.conf.ts","src/components/molecules/mg-panel/mg-panel.scss?tag=mg-panel&encapsulation=shadow","src/components/molecules/mg-panel/mg-panel.tsx"],"sourcesContent":["/**\n * Available expand toggle display options\n */\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/**\n * Generated expand toggle display type from available expand toggle display options\n */\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/**\n * Available title positions\n */\nexport const titlePositions = ['left', 'right'] as const;\n\n/**\n * Generated title positions type from available title positions\n */\nexport type TitlePositionType = (typeof titlePositions)[number];\n","@import '../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n$spacer-default: 1rem;\n$spacer-small: 0.3rem;\n\n:host {\n --mg-card-border: none;\n --mg-card-padding: 0;\n --mg-card-border-radius: var(--mg-panel-border-radius);\n --mg-card-background: hsl(var(--mg-panel-background));\n --mg-card-box-shadow: var(--mg-panel-box-shadow);\n}\n\n.mg-panel {\n &__header {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 0 $spacer-default 0 $spacer-small;\n align-items: flex-start;\n &.mg-panel__header--reverse {\n padding-right: $spacer-small;\n padding-left: $spacer-default;\n }\n }\n\n &__header-title,\n &__header-content {\n display: flex;\n margin: $spacer-small 0;\n }\n\n &__header-content {\n padding-left: $spacer-small;\n flex: 1 auto;\n min-height: var(--default-size);\n align-items: center;\n }\n\n &__header-title {\n mg-input-text {\n flex-grow: 1;\n margin-left: $spacer-small;\n }\n\n mg-button + mg-button:not([slot='append-input']) {\n margin-left: $spacer-small;\n }\n\n &.mg-panel__header-title--full {\n flex: 1 1 auto;\n }\n }\n\n &__collapse-button {\n &-content {\n --font-size: 1.4rem;\n --mg-button-font-weight: 600;\n }\n &-icon.mg-panel__collapse-button-icon--reverse {\n transform: rotate(180deg);\n }\n }\n\n &__content {\n padding: var(--mg-panel-content-padding);\n }\n\n ::slotted([slot='header-right']) {\n display: flex;\n flex-wrap: wrap;\n gap: $spacer-default;\n margin-left: auto;\n }\n\n @include reset-slot-card-variables();\n}\n","import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n tag: 'mg-panel',\n styleUrl: 'mg-panel.scss',\n shadow: true,\n})\nexport class MgPanel {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPanelElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-panel');\n\n /**\n * Panel title\n */\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: string): void {\n if (typeof newValue !== 'string' || newValue.trim() === '') throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n this.titleChange.emit(newValue);\n }\n\n /**\n * Panel title pattern\n */\n @Prop() titlePattern: string;\n @Watch('titlePattern')\n validatetitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error('<mg-panel> prop \"titleEditable\" must be set to `true`.');\n if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === ''))\n throw new Error('<mg-panel> prop \"titlePattern\" must be paired with the prop \"titlePatternErrorMessage\".');\n }\n\n /**\n * Panel title pattern error message\n */\n @Prop() titlePatternErrorMessage: string;\n\n /**\n * Define if panel title is editable\n */\n @Prop({ mutable: true }) titleEditable = false;\n\n /**\n * Define title position\n */\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n\n /**\n * Panel is opened\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: boolean): void {\n this.expandedChange.emit(newValue);\n }\n\n /**\n * Define expand toggle button display\n */\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /**\n * Disable possibility to toggle expand\n */\n @Prop() expandToggleDisabled: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-panel']);\n\n /**\n * Title is in edition mode\n */\n @State() isEditing = false;\n\n /**\n * Cache for updated panel title before validation\n */\n @State() updatedPanelTitle: string;\n\n /**\n * Emmited event when title change\n */\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<string>;\n\n /**\n * Emmited event when expanded change\n */\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n /************\n * Methods *\n ************/\n\n /**\n * Toggle is editing state\n */\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * Collapse button click handler\n */\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /**\n * Edit button click handler\n */\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /**\n * Update title handler\n * @param event - input value change event\n */\n private handleUpdateTitle = (event: CustomEvent<string>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /**\n * Cancel edition button handler\n */\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /**\n * Validate edition button handler\n */\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validatetitlePattern(this.titlePattern);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /**\n * Edit DOM after render\n */\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /*************\n * Render *\n *************/\n\n /**\n * Render collapse button\n * @returns collpase button\n */\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n identifier={`${this.identifier}-collapse-button`}\n aria-expanded={this.expanded !== undefined && this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /**\n * Render edit button\n * @returns edit Button\n */\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /**\n * Render input button\n * @returns edit title input\n */\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n displayCharacterLeft={false}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.cancel}\n is-icon\n variant=\"secondary\"\n onClick={this.handleCancelEditButton}\n identifier={`${this.identifier}-edition-button-cancel`}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.confirm}\n is-icon\n variant=\"secondary\"\n onClick={this.handleValidateEditButton}\n identifier={`${this.identifier}-edition-button-validate`}\n >\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /**\n * Render title\n * @returns title element\n */\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /**\n * Render header children\n * @returns header child\n */\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-panel__header-title': true, 'mg-panel__header-title--full': this.isEditing, 'mg-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /**\n * Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-panel__header': true, 'mg-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-popover-content.js CHANGED Viewed

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

package/dist/components/mg-popover-content.js.map ADDED Viewed

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

package/dist/components/mg-popover-content2.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
 const mgPopoverContentCss = ":host{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color));position:relative}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-popover-content{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width)}.mg-popover-content mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover-content ::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}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;visibility:hidden;width:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);}::slotted([slot=arrow]):before{visibility:visible;content:\"\";position:absolute}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before{border-top:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:1rem}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before{border-left:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{border-right:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(3rem + 2 * var(--mg-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]):before{top:var(--mg-card-border-radius)}";
-const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -86,3 +86,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgPopoverContent as M, defineCustomElement as d };
+//# sourceMappingURL=mg-popover-content2.js.map

package/dist/components/mg-popover-content2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,q2IAAq2I;;MCSp3I,gBAAgB;;;;;;;;;IAmCnB,sBAAiB,GAAG;MAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;uBAjBoB,KAAK;2BAKW,IAAI,SAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;;;;;EAqB3E,iBAAiB;;IAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;EAKD,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;MACvE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5F;GACF;;;;;EAMD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACxC,IAAI,CAAC,WAAW,KACf,kCAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnG,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb,EACD,WAAK,KAAK,EAAC,2BAA2B,IACpC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,YAAM,IAAI,EAAC,SAAS,GAAQ,CACpB,EACV,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.scss?tag=mg-popover-content&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"sourcesContent":["@import '../../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n$popover-space: 1rem;\n$arrow-height: 1rem;\n$arrow-width: 3rem;\n$border-arrow-head: $arrow-height solid hsl(var(--mg-popover-background-color));\n$border-arrow-side: calc(#{$arrow-width} / 2) solid transparent;\n\n:host {\n display: none;\n padding: $popover-space;\n z-index: 2000;\n color: hsl(var(--mg-popover-font-color));\n position: relative;\n}\n\n:host([data-show]) {\n display: block;\n}\n\n:host([data-popper-placement^='left-start']),\n:host([data-popper-placement^='left-end']),\n:host([data-popper-placement^='right-start']),\n:host([data-popper-placement^='right-end']) {\n padding: 0 $popover-space;\n}\n\n.mg-popover-content {\n --mg-card-max-width: var(--mg-popover-max-width);\n --mg-card-min-width: var(--mg-popover-min-width);\n\n mg-button {\n float: right;\n margin-right: calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2); // Without unit (rem) the value can not be negative\n margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);\n margin-left: 3rem;\n }\n\n &__title ::slotted([slot='title']) {\n margin: 0 0 1rem !important;\n font-size: var(--mg-popover-title-font-size) !important;\n font-weight: 600;\n }\n\n @include reset-slot-card-variables();\n}\n\n/**\n* Arrow hide\n*/\n:host([data-popper-placement^='top'][data-arrow-hide]) {\n padding-bottom: 0;\n}\n\n:host([data-popper-placement^='bottom'][data-arrow-hide]) {\n padding-top: 0;\n}\n\n:host([data-popper-placement$='end'][data-arrow-hide]),\n:host([data-popper-placement^='left'][data-arrow-hide]) {\n padding-right: 0;\n}\n\n:host([data-popper-placement$='start'][data-arrow-hide]),\n:host([data-popper-placement^='right'][data-arrow-hide]) {\n padding-left: 0;\n}\n\n/**\n* Arrow style\n*/\n::slotted([slot='arrow']) {\n position: absolute;\n visibility: hidden;\n // Need to set the max size to ensure it will be well centered\n width: calc($arrow-width + 2 * var(--mg-card-border-radius) + 2 * $popover-space);\n height: calc($arrow-width + 2 * var(--mg-card-border-radius) + 2 * $popover-space);\n\n &:before {\n visibility: visible;\n content: '';\n position: absolute;\n }\n\n :host([data-arrow-hide]) & {\n display: none;\n }\n\n /**\n * Arrow position\n */\n :host([data-popper-placement^='top']) &,\n :host([data-popper-placement^='bottom']) & {\n height: $arrow-height;\n\n &:before {\n left: calc(var(--mg-card-border-radius) + $popover-space);\n border-right: $border-arrow-side;\n border-left: $border-arrow-side;\n }\n }\n\n :host([data-popper-placement^='top']) & {\n bottom: 0.1rem;\n filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));\n\n &:before {\n border-top: $border-arrow-head;\n }\n }\n\n :host([data-popper-placement^='bottom']) & {\n top: 0.1rem;\n filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));\n\n &:before {\n border-bottom: $border-arrow-head;\n }\n }\n\n :host([data-popper-placement^='left']) &,\n :host([data-popper-placement^='right']) & {\n width: $arrow-height;\n\n &:before {\n top: calc(var(--mg-card-border-radius) + $popover-space);\n border-top: $border-arrow-side;\n border-bottom: $border-arrow-side;\n }\n }\n\n :host([data-popper-placement^='left']) & {\n right: 0.1rem;\n filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));\n\n &:before {\n border-left: $border-arrow-head;\n }\n }\n\n :host([data-popper-placement^='right']) & {\n left: 0.1rem;\n filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));\n\n &:before {\n border-right: $border-arrow-head;\n }\n }\n\n :host([data-popper-placement^='left-start']) &,\n :host([data-popper-placement^='left-end']) &,\n :host([data-popper-placement^='right-start']) &,\n :host([data-popper-placement^='right-end']) & {\n height: calc($arrow-width + 2 * var(--mg-card-border-radius));\n\n &:before {\n top: var(--mg-card-border-radius);\n }\n }\n}\n","import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-popover-content',\n styleUrl: 'mg-popover-content.scss',\n shadow: true,\n})\nexport class MgPopoverContent {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPopoverContentElement;\n\n /**\n * Define if popover has a cross button\n */\n @Prop() closeButton = false;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-popover-content']);\n\n /**\n * Emited event when close button is clicked\n */\n @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<string>;\n\n /**\n * Handle action for close button\n */\n private handleCloseButton = (): void => {\n this.hideContent.emit();\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are valide\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n }\n\n /**\n * Check if component slots are valide\n */\n componentDidLoad(): void {\n const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <mg-card class={this.classCollection.join()}>\n {this.closeButton && (\n <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n )}\n <div class=\"mg-popover-content__title\">\n <slot name=\"title\"></slot>\n </div>\n <slot name=\"content\"></slot>\n </mg-card>\n <slot name=\"arrow\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

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

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

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

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

@@ -8,7 +8,7 @@ import { c as createPopper } from './popper.js';
 const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}";
-const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -187,6 +187,10 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "closeButton": [4, "close-button"],
     "display": [1028],
     "disabled": [4]
+  }, undefined, {
+    "arrowHide": ["validateArrowHide"],
+    "closeButton": ["validateCloseButton"],
+    "display": ["handleDisplay"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -224,3 +228,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgPopover as M, defineCustomElement as d };
+//# sourceMappingURL=mg-popover2.js.map

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

@@ -0,0 +1 @@

+ {"file":"mg-popover2.js","mappings":"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","names":[],"sources":["src/components/molecules/mg-popover/mg-popover.scss?tag=mg-popover&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover.tsx"],"sourcesContent":["$mg-popover-padding-vertical: var(--mg-popover-padding-vertical, 1.5rem);\n\n:host {\n --mg-card-padding: #{$mg-popover-padding-vertical} var(--mg-popover-padding-horizontal, #{$mg-popover-padding-vertical});\n --mg-card-border: none;\n --mg-card-border-radius: 0.5rem;\n --mg-card-background: hsl(var(--mg-popover-background-color));\n position: relative;\n\n display: contents;\n &::slotted(*) {\n display: inline-block;\n }\n}\n","import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n@Component({\n tag: 'mg-popover',\n styleUrl: 'mg-popover.scss',\n shadow: true,\n})\nexport class MgPopover {\n /************\n * Internal *\n ************/\n\n private popper: PopperInstance;\n private mgPopover: HTMLElement;\n private mgPopoverContent: HTMLMgPopoverContentElement;\n private windows: Window[];\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPopoverElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-popover');\n\n /**\n * Popover placement\n */\n @Prop() placement: Placement = 'bottom';\n\n /**\n * Hide popover arrow\n */\n @Prop() arrowHide = false;\n @Watch('arrowHide')\n validateArrowHide(newValue: MgPopover['arrowHide']): void {\n if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n else delete this.mgPopoverContent.dataset.arrowHide;\n }\n\n /**\n * Define if popover has a cross button\n */\n @Prop() closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgPopover['arrowHide']): void {\n this.mgPopoverContent.closeButton = newValue;\n }\n\n /**\n * Display popover\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n handleDisplay(newValue: boolean): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n this.displayChange.emit(newValue);\n }\n\n /**\n * Disable popover\n */\n @Prop() disabled = false;\n\n /**\n * Emited event when display value change\n */\n @Event({ eventName: 'display-change' }) displayChange: EventEmitter<boolean>;\n\n /**\n * Check if clicked outside of component\n * @param event - mouse event\n */\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n const closestElement: HTMLElement = event.target.closest(`[data-mg-popover-guard]`);\n if (!this.disabled && event.target.closest('mg-popover') !== this.element && closestElement?.dataset.mgPopoverGuard !== this.identifier) {\n this.display = false;\n }\n };\n\n /**\n * Show popover\n */\n private show = (): void => {\n // Make the popover visible\n this.mgPopover.dataset.show = '';\n // Enable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n }));\n // hide when click outside\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.clickOutside, false);\n });\n }, 0);\n };\n\n /**\n * Hide popover\n */\n private hide = (): void => {\n // Hide the popover\n this.mgPopover.removeAttribute('data-show');\n // Disable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n }));\n // Remove event listener\n this.windows.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.clickOutside, false);\n });\n };\n\n /**\n * Handle content hide event\n */\n private handleHideContent = (): void => {\n this.display = false;\n };\n\n /**\n * Render popover content element\n */\n private renderPopoverContent = (): void => {\n this.mgPopoverContent = document.createElement('mg-popover-content');\n this.mgPopoverContent.setAttribute('slot', 'content');\n this.mgPopoverContent.setAttribute('id', this.identifier);\n this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.popperArrow = '';\n this.mgPopoverContent.appendChild(arrow);\n\n // insert elements in DOM\n ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n this.mgPopoverContent.appendChild(slot);\n });\n });\n this.element.appendChild(this.mgPopoverContent);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * update popper position after props change on component did update hook to benefit from render ended\n */\n componentDidUpdate(): void {\n this.popper.update();\n }\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n // render mg-popover-content slot\n this.renderPopoverContent();\n this.validateCloseButton(this.closeButton);\n this.validateArrowHide(this.arrowHide);\n }\n\n /**\n * Check if component props are well configured on init\n */\n componentDidLoad(): void {\n // Get popover content\n this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n //Get interactive element (first element without slot attribute)\n const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n // Add aria attributes\n interactiveElement.setAttribute('aria-controls', this.identifier);\n interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n // Create popperjs popover\n this.popper = createPopper(interactiveElement, this.mgPopover, {\n placement: this.placement,\n strategy: 'fixed',\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 0],\n },\n },\n ],\n });\n\n // add resize observer\n new ResizeObserver(() => {\n this.popper.update();\n }).observe(this.element.querySelector('mg-popover-content'));\n\n // Add events to toggle display\n interactiveElement.addEventListener('click', () => {\n if (!this.disabled) this.display = !this.display;\n });\n\n // Add events to hide popover\n this.element.addEventListener('keydown', e => {\n if (!this.disabled && e.code === 'Escape') {\n this.display = false;\n interactiveElement.focus();\n }\n });\n\n this.handleDisplay(this.display);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-skip-links.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { i as initLocales } from './index2.js';
 const mgSkipLinksCss = ".mg-skip-links{position:absolute;transform:translateY(-100%);opacity:0;background:hsl(var(--color-light))}.mg-skip-links:focus-within{position:relative;transform:translateY(0);opacity:1}.mg-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin:0;padding:0.64rem 1.8rem;list-style:none}.mg-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-skip-links__link:hover{background:hsl(var(--color-dark), 0.1)}";
-const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -53,6 +53,8 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return mgSkipLinksCss; }
 }, [1, "mg-skip-links", {
     "links": [16]
+  }, undefined, {
+    "links": ["validateLinks"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -73,3 +75,5 @@ const MgSkipLinks = MgSkipLinks$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgSkipLinks, defineCustomElement };
+//# sourceMappingURL=mg-skip-links.js.map

package/dist/components/mg-skip-links.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-skip-links.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,mdAAmd;;MCU7dA,aAAW;;;;;;;;;;;;;IA4Cd,oBAAe,GAAG,CAAC,KAAkD;MAC3E,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;KAChE,CAAC;;;EA1BF,aAAa,CAAC,KAAiB;IAC7B,IACE,KAAK,KAAK,SAAS;MACnB,KAAK,CAAC,MAAM,KAAK,CAAC;MAClB,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EACjI;MACA,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;KAC5J;GACF;;;;;;;EA2BD,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,IACvF,UAAI,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI,IAChB,SAAG,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC1E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgSkipLinks"],"sources":["src/components/molecules/mg-skip-links/mg-skip-links.scss?tag=mg-skip-links&encapsulation=shadow","src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"sourcesContent":[".mg-skip-links {\n position: absolute;\n transform: translateY(-100%);\n opacity: 0;\n background: hsl(var(--color-light));\n\n &:focus-within {\n position: relative;\n transform: translateY(0);\n opacity: 1;\n }\n\n &__list {\n // Display\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.6rem;\n margin: 0;\n padding: 0.64rem 1.8rem;\n // Decoration\n list-style: none;\n }\n\n &__link {\n // Display\n display: inline-block;\n padding: 1.2rem;\n // Decoration\n color: hsl(var(--color-dark));\n\n &:hover {\n background: hsl(var(--color-dark), 0.1);\n }\n }\n}\n","/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { SkipLink } from './mg-skip-links.conf';\nimport { initLocales } from '../../../locales';\n\n@Component({\n tag: 'mg-skip-links',\n styleUrl: 'mg-skip-links.scss',\n shadow: true,\n})\nexport class MgSkipLinks {\n /************\n * Internal *\n ************/\n\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgSkipLinksElement;\n\n /**\n * Skip links\n */\n @Prop() links: SkipLink[];\n @Watch('links')\n validateLinks(links: SkipLink[]): void {\n if (\n links === undefined ||\n links.length === 0 ||\n links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')\n ) {\n throw new Error(`<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.`);\n }\n }\n\n /**\n * Emited event when link is clicked\n */\n @Event({ eventName: 'go-to-anchor' }) goToAnchor: EventEmitter<string>;\n\n /***********\n * Methods *\n **********/\n\n /**\n * Handle link click and emit go-to-anchor event\n * @param event - mouse event\n */\n private handleLinkCLick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n event.currentTarget.blur();\n this.goToAnchor.emit(event.currentTarget.getAttribute('href'));\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateLinks(this.links);\n this.messages = initLocales(this.element).messages;\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <nav class=\"mg-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n <ul class=\"mg-skip-links__list\" role=\"list\">\n {this.links.map(link => (\n <li key={link.href}>\n <a class=\"mg-skip-links__link\" href={link.href} onClick={this.handleLinkCLick}>\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n </nav>\n );\n }\n}\n"],"version":3}

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

@@ -26,7 +26,7 @@ const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.m
  * @returns tab item type is valid
  */
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
-const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -250,6 +250,11 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "activeTab": [1538, "active-tab"],
     "tabs": [32],
     "classCollection": [32]
+  }, undefined, {
+    "label": ["validateLabel"],
+    "size": ["validateSize"],
+    "items": ["validateItems"],
+    "activeTab": ["validateActiveTab"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -280,3 +285,5 @@ const MgTabs = MgTabs$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgTabs, defineCustomElement };
+//# sourceMappingURL=mg-tabs.js.map

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

@@ -0,0 +1 @@

+ {"file":"mg-tabs.js","mappings":"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","names":["MgTabs"],"sources":["src/components/molecules/mg-tabs/mg-tabs.conf.ts","src/components/molecules/mg-tabs/mg-tabs.scss?tag=mg-tabs&encapsulation=shadow","src/components/molecules/mg-tabs/mg-tabs.tsx"],"sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport enum Status {\n VISIBLE = 'visible',\n HIDDEN = 'hidden',\n DISABLED = 'disabled',\n ACTIVE = 'active',\n}\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n label: string;\n icon?: MgIcon['icon'];\n badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n status: Status;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = (typeof sizes)[number];\n","@import '../../../styles/mixins/navigation-button.scss';\n\n$navigation-button-sizes: (\n 'regular': (\n 'vertical': 1rem,\n 'horizontal': 2rem,\n ),\n 'large': (\n 'vertical': 1.5rem,\n 'horizontal': 3rem,\n ),\n);\n\n@include navigation-button('mg-tabs', $navigation-button-sizes);\n\n.mg-tabs {\n &__header {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n border-bottom: var(--mg-tabs-border-bottom);\n }\n &__content-container:focus-visible {\n outline: none;\n }\n &__navigation-button-text {\n flex: 0 0 content;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: TabItem): boolean => typeof tab === 'object' && typeof tab.label === 'string';\n\n@Component({\n tag: 'mg-tabs',\n styleUrl: 'mg-tabs.scss',\n shadow: true,\n})\nexport class MgTabs {\n /************\n * Internal *\n ************/\n\n // classes\n private readonly tabPanel = 'panel';\n private readonly buttonTabBaseClass = 'mg-tabs__navigation-button';\n\n // variables\n private tabFocus: number;\n private startIndex = 1;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTabsElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-tabs');\n\n /**\n * Tabs label. Include short tabs description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgTabs['label']): void {\n if (typeof newValue !== 'string' || newValue.trim() === '') {\n throw new Error('<mg-tabs> prop \"label\" is required.');\n }\n }\n\n /**\n * Define tabs size\n */\n @Prop() size: SizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgTabs['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}`);\n }\n this.classCollection.add(`mg-tabs--size-${this.size}`);\n }\n\n /**\n * Tabs items\n */\n @Prop() items!: string[] | TabItem[];\n @Watch('items')\n validateItems(newValue: MgTabs['items']): void {\n // String array\n if (allItemsAreString(newValue as string[])) {\n this.tabs = (newValue as string[]).map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));\n }\n // Object array\n else if (newValue && newValue.length > 0 && (newValue as TabItem[]).every(item => isTabItem(item))) {\n this.tabs = newValue as TabItem[];\n // init active tabs if not set. Default: index 0.\n if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined) this.tabs[0].status = Status.ACTIVE;\n } else {\n throw new Error('<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem.');\n }\n }\n\n /**\n * Active tab number\n */\n @Prop({ reflect: true, mutable: true }) activeTab: number;\n @Watch('activeTab')\n validateActiveTab(newValue: MgTabs['activeTab']): void {\n if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {\n this.tabs.forEach((tab, index) => {\n const isNewActiveTab = index === newValue - this.startIndex;\n // reset active tabs\n if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n // set active tab from given tab key\n else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab) tab.status = Status.ACTIVE;\n });\n // emit change active tab key event\n if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {\n this.activeTabChange.emit(newValue);\n }\n } else if (newValue !== undefined) {\n throw new Error('<mg-tabs> prop \"activeTab\" must be between 1 and tabs length.');\n }\n }\n\n /**\n * Component tabs\n */\n @State() tabs: TabItem[] = [];\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-tabs']);\n\n /**\n * Emited event when active tab change\n */\n @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<number>;\n\n /**\n * Method to know if given tab has the given status\n * @param tab - item tab key to set to ACTIVE status\n * @param status - status to valide\n * @returns status comparaison\n */\n private tabHasStatus = (tab: TabItem, status: Status): boolean => tab.status === status;\n\n /**\n * Method to get element id from index\n * @param element - to get id\n * @param index - to generate id\n * @returns generated element id\n */\n private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n /**\n * Method to get tab item index\n * @param index - to get\n * @returns index\n */\n private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n /**\n * Method to get the active-tab value\n * @returns of the active-tab\n */\n private getActiveTab = (): number =>\n this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => ({ ...tab, index })).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);\n\n /**\n * Handle click events on tabs\n * @param event - mouse event\n */\n private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n const tabId = event.currentTarget.dataset.index;\n const tab = this.tabs[Number(tabId) - this.startIndex];\n if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {\n event.preventDefault();\n } else {\n this.activeTab = Number(tabId);\n this.tabFocus = undefined;\n }\n };\n\n /**\n * get navigation button class from given status\n * @param status - button tab status\n * @returns button class/selector variant\n */\n private getNavigationButtonClass = (status: Status): string => `${this.buttonTabBaseClass}--${status}`;\n\n /**\n * Handle keyboard event on tabs\n * @param event - mouse event\n */\n private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n const parent = event.target.parentElement;\n if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n this.tabFocus = Number(event.target.dataset.index);\n parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n // Move right\n if (event.key === 'ArrowRight') {\n this.tabFocus++;\n // If we're at the end, go to the start\n if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n // Move left\n } else if (event.key === 'ArrowLeft') {\n this.tabFocus--;\n // If we're at the start, move to the end\n if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n }\n\n const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n // if focus item is ['hidden'] we recursively repeat action\n if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n // else run focus methods on tabFocus element\n } else {\n parentButtonElement.setAttribute('tabindex', '0');\n parentButtonElement.focus();\n }\n } else if (event.key === 'Tab') {\n this.resetFocus();\n }\n };\n\n /**\n * Method to reset focus behavior\n */\n private resetFocus = (): void => {\n // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n setTimeout(() => {\n this.tabFocus = undefined;\n Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');\n });\n }, 0);\n };\n\n /**\n * Validate slots setting\n */\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Check tabs format\n this.validateLabel(this.label);\n this.validateItems(this.items);\n this.validateActiveTab(this.activeTab);\n this.validateSize(this.size);\n this.validateSlots();\n }\n\n /**\n * add listners\n */\n componentDidLoad(): void {\n document.addEventListener(\n 'click',\n (event: MouseEvent & { target: HTMLElement }) => {\n if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n },\n false,\n );\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n <header role=\"tablist\" aria-label={this.label} class=\"mg-tabs__header\">\n {this.tabs.map((tab, index) => (\n <button\n key={tab.label}\n role=\"tab\"\n id={this.getElementId(this.identifier, index)}\n class={{\n [`${this.buttonTabBaseClass}`]: true,\n [`${this.buttonTabBaseClass}--horizontal`]: true,\n [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n }}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n aria-controls={this.getElementId(this.tabPanel, index)}\n aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n data-index={this.getTabItemIndex(index)}\n >\n {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n {tab.label}\n {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n </button>\n ))}\n </header>\n {this.tabs.map((tab, index) => (\n <article\n key={tab.label}\n role=\"tabpanel\"\n id={this.getElementId(this.tabPanel, index)}\n hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n aria-labelledby={this.getElementId(this.identifier, index)}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n class=\"mg-tabs__content-container\"\n >\n <slot name={this.getElementId('tab_content', index)}></slot>\n </article>\n ))}\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -8,7 +8,7 @@ const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'
 const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));border-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--secondary.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));border-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--success.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));border-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--warning.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));border-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--danger.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag.mg-tag--info.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));border-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));color:hsl(var(--color-dark))}.mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}::slotted(mg-icon){margin-right:0.4rem}";
-const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -93,6 +93,10 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "outline": [4],
     "soft": [4],
     "classCollection": [32]
+  }, undefined, {
+    "variant": ["validateVariant"],
+    "outline": ["validateOutline"],
+    "soft": ["validateSoft"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -113,3 +117,5 @@ const MgTag = MgTag$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgTag, defineCustomElement };
+//# sourceMappingURL=mg-tag.js.map

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

@@ -0,0 +1 @@

+ {"file":"mg-tag.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAU;;ACHjG,MAAM,QAAQ,GAAG,qwHAAqwH;;MCQzwHA,OAAK;;;;;;;;;IAMC,iBAAY,GAAG,iBAAiB,CAAC;IACjC,cAAS,GAAG,cAAc,CAAC;mBAcV,QAAQ,CAAC,CAAC,CAAC;;;2BAwCP,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;;EAtC/D,eAAe,CAAC,QAA0B,EAAE,QAA2B;IACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;OACpD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;KACjD;GACF;EAOD,eAAe,CAAC,QAA0B;IACxC,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;EAOD,YAAY,CAAC,QAAuB;;IAElC,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;MAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;;IAG3G,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;MAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAClD;;;;;;;;EAeO,mBAAmB,CAAC,WAAmB;IAC7C,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE;MAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;GACjI;;;;;;;EASD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgTag"],"sources":["src/components/atoms/mg-tag/mg-tag.conf.ts","src/components/atoms/mg-tag/mg-tag.scss?tag=mg-tag&encapsulation=shadow","src/components/atoms/mg-tag/mg-tag.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;\n\n/**\n * TagVariantType type from tag variants\n */\nexport type TagVariantType = (typeof variants)[number];\n","/* Variables */\n$mg-tag-border-width: 0.1rem;\n$mg-tag-padding-horizontal: 0.7rem;\n\n/* Mixins */\n@mixin tag-variant($name, $backgroundColor, $color) {\n &.mg-tag--#{$name} {\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 &.mg-tag--outline {\n // Decoration\n background-color: transparent;\n // Font\n color: hsl(var(--color-#{$backgroundColor}));\n }\n &.mg-tag--soft {\n $fill-color: hsl(var(--color-#{$backgroundColor}-h), var(--color-#{$backgroundColor}-s), var(--mg-color-soft-l));\n font-weight: 400;\n background-color: $fill-color;\n border-color: $fill-color;\n color: hsl(var(--color-dark));\n ::slotted(mg-icon) {\n @if $name == 'secondary' {\n color: hsl(var(--color-dark));\n } @else {\n color: hsl(var(--color-#{$backgroundColor}));\n }\n }\n }\n }\n}\n\n/* Styles */\n.mg-tag {\n // Display\n padding: calc((var(--mg-tag-height) - (2 * $mg-tag-border-width) - (var(--mg-tag-font-size) * var(--line-height))) / 2) $mg-tag-padding-horizontal - $mg-tag-border-width;\n min-height: var(--mg-tag-height);\n box-sizing: border-box;\n // Decoration\n border-radius: var(--mg-tag-border-radius);\n border: $mg-tag-border-width solid;\n // Font\n font-size: var(--mg-tag-font-size);\n font-weight: 600;\n text-align: center;\n\n // Variant\n @include tag-variant('primary', 'dark', 'light');\n @include tag-variant('secondary', 'light', 'dark');\n @include tag-variant('success', 'success', 'dark');\n @include tag-variant('warning', 'warning', 'dark');\n @include tag-variant('danger', 'danger', 'light');\n @include tag-variant('info', 'info', 'light');\n}\n\n.mg-tag,\nmg-tag {\n display: inline-block;\n vertical-align: middle;\n}\n\n::slotted(mg-icon) {\n margin-right: 0.4rem;\n}\n","import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n tag: 'mg-tag',\n styleUrl: 'mg-tag.scss',\n shadow: true,\n})\nexport class MgTag {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classOutline = 'mg-tag--outline';\n private readonly classSoft = 'mg-tag--soft';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTagElement;\n\n /**\n * Define tag variant\n */\n @Prop() variant: TagVariantType = variants[0]; // primary\n @Watch('variant')\n validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-tag> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-tag--${oldValue}`);\n }\n this.classCollection.add(`mg-tag--${newValue}`);\n }\n }\n\n /**\n * Define if tag is using outline style\n */\n @Prop() outline: boolean;\n @Watch('outline')\n validateOutline(newValue: MgTag['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /**\n * Define if tag is using soft style\n */\n @Prop() soft: boolean;\n @Watch('soft')\n validateSoft(newValue: MgTag['soft']): void {\n // usage validation\n if (newValue && this.outline) throw new Error('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n\n // apply class\n if (newValue) this.classCollection.add(this.classSoft);\n else this.classCollection.delete(this.classSoft);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-tag']);\n\n /*************\n * Methods *\n *************/\n\n /**\n * Validate the given textContent\n * @param textContent - html element textContent property\n */\n private validateTextContent(textContent: string): void {\n if (typeof textContent !== 'string' || textContent.trim() === '') throw new Error('<mg-tag> slot must contain a text content.');\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.validateOutline(this.outline);\n this.validateSoft(this.soft);\n this.validateTextContent(this.element.textContent);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <slot></slot>\n </span>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-tooltip-content.js CHANGED Viewed

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

package/dist/components/mg-tooltip-content.js.map ADDED Viewed

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

package/dist/components/mg-tooltip-content2.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const mgTooltipContentCss = ":host{display:none;padding:0.5rem 0.8rem;z-index:1000;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start;max-width:40rem;box-sizing:border-box}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{visibility:visible;content:\"\";transform:rotate(45deg)}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background-color:hsl(var(--mg-tooltip-background-color))}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:-4px}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:-4px}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:-4px}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:-4px}";
-const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -39,3 +39,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgTooltipContent as M, defineCustomElement as d };
+//# sourceMappingURL=mg-tooltip-content2.js.map

package/dist/components/mg-tooltip-content2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,42BAA42B;;MCO33B,gBAAgB;;;;;;;;;;;;;;EAc3B,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS,IAClB,YAAM,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,GAAQ,EAC1E,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.scss?tag=mg-tooltip-content&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"sourcesContent":[":host {\n // Display\n display: none;\n padding: 0.5rem 0.8rem;\n z-index: 1000;\n // Decoration\n border-radius: var(--mg-tooltip-border-radius);\n background-color: hsl(var(--mg-tooltip-background-color));\n // Font\n color: hsl(var(--mg-tooltip-font-color));\n text-align: start;\n max-width: 40rem;\n box-sizing: border-box;\n}\n\n:host([data-show]) {\n display: block;\n}\n\n::slotted([slot='arrow']) {\n visibility: hidden;\n\n &::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n }\n\n &,\n &::before {\n // Display\n position: absolute;\n width: 0.8rem;\n height: 0.8rem;\n z-index: 9999;\n // Decoration\n background-color: hsl(var(--mg-tooltip-background-color));\n }\n\n :host([data-popper-placement^='top']) > & {\n bottom: -4px;\n }\n\n :host([data-popper-placement^='bottom']) > & {\n top: -4px;\n }\n\n :host([data-popper-placement^='left']) > & {\n right: -4px;\n }\n\n :host([data-popper-placement^='right']) > & {\n left: -4px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'mg-tooltip-content',\n styleUrl: 'mg-tooltip-content.scss',\n shadow: true,\n})\nexport class MgTooltipContent {\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"tooltip\">\n <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n <slot name=\"arrow\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

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

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

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

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

@@ -18,7 +18,7 @@ const mgTooltipCss = ":host{display:inline-block}";
  * @returns return true if type is HTMLMgButtonElement
  */
 const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
-const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -304,6 +304,10 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "placement": [1],
     "display": [1028],
     "disabled": [4]
+  }, undefined, {
+    "message": ["validateMessage"],
+    "display": ["handleDisplay"],
+    "disabled": ["validateDisabled"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -326,3 +330,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgTooltip as M, defineCustomElement as d };
+//# sourceMappingURL=mg-tooltip2.js.map