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

@mgdis/mg-components 5.29.0 → 6.1.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 (337) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n/\n @slot - Panel content\n * @slot header-right - Header right panel content\n /\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\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: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) 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\n /\n Panel title pattern error message\n /\n @Prop() titlePatternErrorMessage?: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\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: MgPanel['expanded']): 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-c-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<HTMLMgPanelElement['panelTitle']>;\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\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.validateTitlePattern(this.titlePatternErrorMessage);\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.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-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-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-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-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-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-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"]}
1	+ {"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n/*\n @slot - Panel content\n * @slot header-right - Header right panel content\n /\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\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 @Watch('identifier')\n watchIdentifier(newValue: MgPanel['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-panel> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Panel title\n /\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error(`<mg-panel> prop \"panelTitle\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n this.titleChange.emit(newValue);\n }\n\n /\n Panel title pattern\n /\n @Prop() titlePattern?: string;\n\n /\n Panel title pattern error message\n /\n @Prop() titlePatternErrorMessage?: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\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(', ')}. Passed value: ${toString(newValue)}.`);\n }\n\n /\n Panel is opened\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): 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))\n throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);\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-c-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<HTMLMgPanelElement['panelTitle']>;\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\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<HTMLMgInputTextElement['value']>): 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.watchIdentifier(this.identifier);\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\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 aria-expanded={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-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-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}>\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 characterLeftHide={true}\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 slot=\"append-input\" label={this.messages.general.cancel} is-icon variant=\"secondary\" onClick={this.handleCancelEditButton}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button slot=\"append-input\" label={this.messages.general.confirm} is-icon variant=\"secondary\" onClick={this.handleValidateEditButton}>\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-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-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-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-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"]}

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

@@ -32,7 +32,7 @@ export class MgPopoverContent {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
         if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
-            throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
+            throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
     }
     /**
@@ -40,7 +40,7 @@ export class MgPopoverContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'ffe73fca1c2d8ffa0f5ac2359b50a453b37df7be' }, h("mg-card", { key: 'f6e04d90892104abf496cf3ca3a601cb747346c9', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: '53b6f7360b07321c0433fb2f44f1b1dd9016f204', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: 'aa638786bca9af815d36e1de905559d60e68e44c', icon: "cross" }))), h("div", { key: '0b9f1319e409a0b1d75d16236806fd024c8b804e', class: "mg-c-popover-content__title" }, h("slot", { key: '7f52704d2ed49ea048ffd06b763a238d288ccaf3', name: "title" })), h("slot", { key: '7a2fd6b013e592acb616793439b2f4e8458ec372', name: "content" })), h("slot", { key: 'ceb0a6453ece1b861fe5ab3d63e803b1f41cb148', name: "arrow" })));
+        return (h(Host, { key: '8d2dd7d21518de744c18f0280b7b418f3a76acca' }, h("mg-card", { key: '8beab7c9fb692c1983515709a1ee888dc7e5157a', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: 'e636569be26b0c741e0b03e806787d91b47ded5c', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '3edc717cbe542494d892566c182883e20b1ca4cb', icon: "cross" }))), h("div", { key: 'd18525218972d92b6932984edb50844658e12970', class: "mg-c-popover-content__title" }, h("slot", { key: '2cceb41fd4ebb00b889e71cab211431e5894d04c', name: "title" })), h("slot", { key: 'a6615d9d7c85b32fb63d3d89db02fae2f8d5c1b2', name: "content" })), h("slot", { key: '0ff4bf72de19a3d56aafb64391cfc276d70e2f18', name: "arrow" })));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;QAgC3B;;WAEG;QACK,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;2BAjBoB,KAAK;+BAKW,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;IAc7E;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,CAAC;~~QAC7F~~,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;gBACxC,IAAI,CAAC,WAAW,IAAI,CACnB,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBACnG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;gBACD,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;YACV,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/*\n @internal\n /\n@Component({\n tag: 'mg-popover-content',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\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-c-popover-content']);\n\n /\n Emited event when close button is clicked\n /\n @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\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-c-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"]}
1	+ {"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;QAgC3B;;WAEG;QACK,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;2BAjBoB,KAAK;+BAKW,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;IAc7E;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9F,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;gBACxC,IAAI,CAAC,WAAW,IAAI,CACnB,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBACnG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;gBACD,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;YACV,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/*\n @internal\n /\n@Component({\n tag: 'mg-popover-content',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\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-c-popover-content']);\n\n /\n Emited event when close button is clicked\n /\n @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\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-c-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"]}

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { createID, getWindows } from "@mgdis/stencil-helpers";
+import { createID, getWindows, isValideID, toString } from "@mgdis/stencil-helpers";
 import { createPopper } from "@popperjs/core";
 /**
  * @slot - Element that will display the popover
@@ -12,8 +12,9 @@ export class MgPopover {
          * @param event - mouse event
          */
         this.clickOutside = (event) => {
-            if (!this.disabled && event.target.closest('mg-popover') !== this.element && !event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`))
+            if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`) === null) {
                 this.display = false;
+            }
         };
         /**
          * Show popover
@@ -60,7 +61,9 @@ export class MgPopover {
             // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot =  Windows > document > [data-mg-popover-guard] > shadowRoot
             const guardChildren = Array.from(((_b = (_a = document.querySelector(`[data-mg-popover-guard="${this.identifier}"]`)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.children) || new Set());
             [...guardChildren, ...this.windows].forEach((element) => {
-                element[action]('click', this.clickOutside, false);
+                if (element !== null) {
+                    element[action]('click', this.clickOutside, false);
+                }
             });
         };
         /**
@@ -102,7 +105,10 @@ export class MgPopover {
         this.display = false;
         this.disabled = false;
     }
-    validateIdentifier() {
+    validateIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
     }
@@ -142,7 +148,7 @@ export class MgPopover {
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
-        this.validateIdentifier();
+        this.validateIdentifier(this.identifier);
         this.validateArrowHide(this.arrowHide);
     }
     /**
@@ -157,7 +163,7 @@ export class MgPopover {
         interactiveElement.setAttribute('aria-controls', this.identifier);
         interactiveElement.setAttribute('aria-expanded', `${this.display}`);
         const fallbackPlacements = [];
-        if (this.element.dataset.fallbackPlacement) {
+        if (this.element.dataset.fallbackPlacement !== undefined) {
             fallbackPlacements.push(this.element.dataset.fallbackPlacement);
         }
         // Create popperjs popover
@@ -204,7 +210,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
+        return (h(Host, { key: 'a57ac343aacb59b7f3c86d0a41309a1aecef2a18' }, h("slot", { key: '086f8ce4cf204e465e7e0fd200bc3f4bddd2d45d' }), h("slot", { key: 'd9fb5a62f694b01605ce0008195445f89c1e70e8', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n/*\n @slot - Element that will display the popover\n * @slot content - popover content\n /\n@Component({\n tag: 'mg-popover',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\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 @Watch('identifier')\n validateIdentifier(): void {\n // use renderPopoverContent to update popover-content id\n this.renderPopoverContent();\n }\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['closeButton']): 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<HTMLMgPopoverElement['display']>;\n\n /\n Check if clicked outside of component\n * @param event - mouse event\n /\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (!this.disabled && event.target.closest('mg-popover') !== this.element && !event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`)) this.display = false;\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.setPopperListeners(true);\n // hide when click outside\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.manageClickOutsideListeners('addEventListener');\n });\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.setPopperListeners(false);\n // Remove event listener\n this.manageClickOutsideListeners('removeEventListener');\n };\n\n /\n Set popper listeners\n * @param newValue - if true enable popper listners\n /\n private setPopperListeners = (newValue: boolean): void => {\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }],\n }));\n };\n\n /\n Manage all clickOustside listeners\n * @param action - top process on elements listeners\n /\n private manageClickOutsideListeners = (action: 'removeEventListener' \| 'addEventListener'): void => {\n // clickOutside listeners need to bind windows\n // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n // This result in the givern junction :\n // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot = Windows > document > [data-mg-popover-guard] > shadowRoot\n const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children \|\| new Set());\n [...guardChildren, ...this.windows].forEach((element: Window \| HTMLElement) => {\n element[action]('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 const mgPopoverContent = this.element.querySelector('mg-popover-content');\n if (mgPopoverContent === null) {\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 } else {\n mgPopoverContent.setAttribute('id', this.identifier);\n }\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.validateIdentifier();\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 const fallbackPlacements = [];\n if (this.element.dataset.fallbackPlacement) {\n fallbackPlacements.push(this.element.dataset.fallbackPlacement);\n }\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 name: 'flip',\n options: {\n fallbackPlacements: [...fallbackPlacements, 'auto'],\n },\n },\n ],\n });\n\n // add resize observer\n [interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {\n new ResizeObserver(() => {\n this.popper.update();\n }).observe(element);\n });\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"]}
1	+ {"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n/*\n @slot - Element that will display the popover\n * @slot content - popover content\n /\n@Component({\n tag: 'mg-popover',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\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 @Watch('identifier')\n validateIdentifier(newValue: MgPopover['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderPopoverContent to update popover-content id\n this.renderPopoverContent();\n }\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['closeButton']): 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<HTMLMgPopoverElement['display']>;\n\n /\n Check if clicked outside of component\n * @param event - mouse event\n /\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`) === null) {\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.setPopperListeners(true);\n // hide when click outside\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.manageClickOutsideListeners('addEventListener');\n });\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.setPopperListeners(false);\n // Remove event listener\n this.manageClickOutsideListeners('removeEventListener');\n };\n\n /\n Set popper listeners\n * @param newValue - if true enable popper listners\n /\n private setPopperListeners = (newValue: boolean): void => {\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }],\n }));\n };\n\n /\n Manage all clickOustside listeners\n * @param action - top process on elements listeners\n /\n private manageClickOutsideListeners = (action: 'removeEventListener' \| 'addEventListener'): void => {\n // clickOutside listeners need to bind windows\n // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n // This result in the givern junction :\n // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot = Windows > document > [data-mg-popover-guard] > shadowRoot\n const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children \|\| new Set());\n [...guardChildren, ...this.windows].forEach((element: Window \| HTMLElement) => {\n if (element !== null) {\n element[action]('click', this.clickOutside, false);\n }\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 const mgPopoverContent = this.element.querySelector('mg-popover-content');\n if (mgPopoverContent === null) {\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 } else {\n mgPopoverContent.setAttribute('id', this.identifier);\n }\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.validateIdentifier(this.identifier);\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 const fallbackPlacements = [];\n if (this.element.dataset.fallbackPlacement !== undefined) {\n fallbackPlacements.push(this.element.dataset.fallbackPlacement);\n }\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 name: 'flip',\n options: {\n fallbackPlacements: [...fallbackPlacements, 'auto'],\n },\n },\n ],\n });\n\n // add resize observer\n [interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {\n new ResizeObserver(() => {\n this.popper.update();\n }).observe(element);\n });\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"]}

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

@@ -36,7 +36,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: 'e5a7020edfe2e491af48785f3d9fa9bede770ae5', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'da692631900bb61269803e93718d0dacdb6a5e8a', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: 'dc5eeedabd3189f40a246bd5fe6da930928e3f22', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '178d8c46d62d8db10d43d6609efb15cbf429c207', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,15 +1,14 @@
 /**
  * Available tabs items status
  */
-export var Status;
-(function (Status) {
-    Status["VISIBLE"] = "visible";
-    Status["HIDDEN"] = "hidden";
-    Status["DISABLED"] = "disabled";
-    Status["ACTIVE"] = "active";
-})(Status || (Status = {}));
+export const Status = {
+    VISIBLE: 'visible',
+    HIDDEN: 'hidden',
+    DISABLED: 'disabled',
+    ACTIVE: 'active',
+};
 /**
  * List of all possibles sizes
  */
-export const sizes = ['regular', 'large'];
+export const sizes = ['medium', 'large'];
 //# sourceMappingURL=mg-tabs.conf.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-tabs.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.conf.ts"],"names":[],"mappings":"~~AAGA~~;;GAEG;AACH,MAAM,~~CAAN~~,~~IAAY~~,~~MAKX~~;~~AALD~~,~~WAAY~~,~~MAAM;IAChB~~,~~6BAAmB,CAAA~~;~~IACnB~~,~~2BAAiB~~,~~CAAA;IACjB,+BAAqB~~,~~CAAA~~;~~IACrB~~,~~2BAAiB~~,~~CAAA~~;~~AACnB~~,~~CAAC,EALW,~~MAAM,~~KAAN~~,~~MAAM~~,~~QAKjB~~;~~AAaD~~;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,~~SAAS~~,EAAE,OAAO,CAAU,CAAC","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"]}
1	+ {"version":3,"file":"mg-tabs.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.conf.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAA+B;IAChD,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAaF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import type { Size, Status as StatusType } from '../../../types';\nimport type { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport type { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/*\n Available tabs items status\n /\nexport const Status: Record<string, StatusType> = {\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: StatusType;\n};\n\n/\n List of all possibles sizes\n /\nexport const sizes = ['medium', 'large'] as const;\n\n/\n Variant type from variants\n */\nexport type SizeType = Size & (typeof sizes)[number];\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, allItemsAreString, isValidString, nextTick } from "@mgdis/stencil-helpers";
+import { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from "@mgdis/stencil-helpers";
 import { sizes, Status } from "./mg-tabs.conf";
 /**
  * type TabItem validation function
@@ -103,6 +103,14 @@ export class MgTabs {
                 this.resetFocus();
             }
         };
+        /**
+         * Reset focus on document click
+         * @param event - mouse event
+         */
+        this.handleDocumentClick = (event) => {
+            if (event.target.closest('mg-tabs') !== this.element)
+                this.resetFocus();
+        };
         /**
          * Method to reset focus behavior
          */
@@ -125,20 +133,25 @@ export class MgTabs {
         };
         this.identifier = createID('mg-tabs');
         this.label = undefined;
-        this.size = 'regular';
+        this.size = 'medium';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
         this.classCollection = new ClassList(['mg-c-tabs']);
     }
+    watchIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
+    }
     validateLabel(newValue) {
         if (!isValidString(newValue)) {
-            throw new Error('<mg-tabs> prop "label" is required.');
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${toString(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
@@ -150,7 +163,7 @@ export class MgTabs {
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
             this.tabs = newValue;
         else
-            throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);
     }
     validateActiveTab(newValue) {
         // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
@@ -175,7 +188,7 @@ export class MgTabs {
             this.activeTabChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable".`);
+            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${toString(newValue)}.`);
         }
     }
     /*************
@@ -186,6 +199,7 @@ export class MgTabs {
      */
     componentWillLoad() {
         // Check tabs format
+        this.watchIdentifier(this.identifier);
         this.validateLabel(this.label);
         this.validateItems(this.items);
         this.validateActiveTab(this.activeTab);
@@ -196,17 +210,20 @@ export class MgTabs {
      * add listners
      */
     componentDidLoad() {
-        document.addEventListener('click', (event) => {
-            if (event.target.closest('mg-tabs') !== this.element)
-                this.resetFocus();
-        }, false);
+        document.addEventListener('click', this.handleDocumentClick, false);
+    }
+    /**
+     * remove listeners
+     */
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.handleDocumentClick);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '9327c6fb0d13d41d82b50e2f4f79696916ef142f', class: this.classCollection.join() }, h("header", { key: 'b783c343af1e817a2ab231d803e8ecf32df52566', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: 'cbc4eade5ceffc6b6e4291ce1ee0953251b0a54d', class: this.classCollection.join() }, h("header", { key: '6ca55ee7a0073b08cd588b071178eeb0e5016f39', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -268,7 +285,7 @@ export class MgTabs {
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
-                    "resolved": "\"large\" | \"regular\"",
+                    "resolved": "\"large\" | \"medium\"",
                     "references": {
                         "SizeType": {
                             "location": "import",
@@ -285,7 +302,7 @@ export class MgTabs {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "'regular'"
+                "defaultValue": "'medium'"
             },
             "items": {
                 "type": "unknown",
@@ -359,6 +376,9 @@ export class MgTabs {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "identifier",
+                "methodName": "watchIdentifier"
+            }, {
                 "propName": "label",
                 "methodName": "validateLabel"
             }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick } from '@mgdis/stencil-helpers';\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: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/\n @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n /\n@Component({\n tag: 'mg-tabs',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n shadow: true,\n})\nexport class MgTabs {\n /**********\n Internal \n *********/\n\n // classes\n private readonly tabPanel = 'panel';\n private readonly buttonTabBaseClass = 'mg-c-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 (!isValidString(newValue)) {\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-c-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)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n // Object array\n else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n else throw new Error('<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem.');\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 // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n if (newValue === undefined) {\n this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n : this.startIndex;\n } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\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 (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n });\n // emit change active tab key event\n this.activeTabChange.emit(newValue);\n } else {\n throw new Error(`<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\".`);\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-c-tabs']);\n\n /\n Emited event when active tab change\n /\n @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n /\n Validate that new tab status can be `Status.ACTIVE`\n * @param tab - tab item\n * @returns true when tab match condition to get a `Status.ACTIVE`\n /\n private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\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 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 if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\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 nextTick(() => {\n this.tabFocus = undefined;\n Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n });\n });\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-c-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-c-tabs__content-container\"\n >\n <slot name={this.getElementId('tab_content', index)}></slot>\n </article>\n ))}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from '@mgdis/stencil-helpers';\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: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/\n @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n /\n@Component({\n tag: 'mg-tabs',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n shadow: true,\n})\nexport class MgTabs {\n /**********\n Internal \n *********/\n\n // classes\n private readonly tabPanel = 'panel';\n private readonly buttonTabBaseClass = 'mg-c-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 @Watch('identifier')\n watchIdentifier(newValue: MgTabs['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-tabs> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\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 (!isValidString(newValue)) {\n throw new Error(`<mg-tabs> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define tabs size\n /\n @Prop() size: SizeType = 'medium';\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(', ')}. Passed value: ${toString(newValue)}.`);\n }\n this.classCollection.add(`mg-c-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)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n // Object array\n else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n else throw new Error(`<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);\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 // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n if (newValue === undefined) {\n this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n : this.startIndex;\n } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\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 (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n });\n // emit change active tab key event\n this.activeTabChange.emit(newValue);\n } else {\n throw new Error(\n `<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\". Passed value: ${toString(newValue)}.`,\n );\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-c-tabs']);\n\n /\n Emited event when active tab change\n /\n @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n /\n Validate that new tab status can be `Status.ACTIVE`\n * @param tab - tab item\n * @returns true when tab match condition to get a `Status.ACTIVE`\n /\n private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\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: TabItem['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 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 if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\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: TabItem['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 Reset focus on document click\n * @param event - mouse event\n /\n private handleDocumentClick = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\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 nextTick(() => {\n this.tabFocus = undefined;\n Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n });\n });\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.watchIdentifier(this.identifier);\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('click', this.handleDocumentClick, false);\n }\n\n /\n remove listeners\n /\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handleDocumentClick);\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-c-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-c-tabs__content-container\"\n >\n <slot name={this.getElementId('tab_content', index)}></slot>\n </article>\n ))}\n </div>\n );\n }\n}\n"]}

package/dist/collection/locales/en/messages.json CHANGED Viewed

@@ -63,7 +63,7 @@
     "allRequired": "All fields are required",
     "allRequiredSingle": "The field is required"
   },
-  "message": {
+  "alert": {
     "closeButton": "Close message"
   },
   "modal": {

package/dist/collection/locales/fr/messages.json CHANGED Viewed

@@ -63,7 +63,7 @@
     "allRequired": "Tous les champs sont obligatoires",
     "allRequiredSingle": "Le champ est obligatoire"
   },
-  "message": {
+  "alert": {
     "closeButton": "Fermer le message"
   },
   "modal": {

package/dist/collection/types/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=index.js.map

package/dist/collection/types/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Defines the possible values for size\n */\nexport type Size = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n\n/**\n * Defines the possible values for variant\n */\nexport type Variant = 'info' | 'success' | 'warning' | 'danger' | 'danger-alt' | 'primary' | 'secondary' | 'app' | 'light' | 'dark' | 'flat' | 'text-color' | 'link';\n\n/**\n * Defines the possible values for variantStyle\n */\nexport type VariantStyle = 'icon' | 'background' | 'bar-left' | 'full';\n\n/**\n * Defines the possible values for input error\n */\nexport type InputError = 'min' | 'max' | 'minMax' | 'required' | 'badInput';\n\n/**\n * Defines the possible values for status\n */\nexport type Status = 'visible' | 'hidden' | 'disabled' | 'active';\n\n/**\n * Define option type\n */\nexport type Option = {\n title: string;\n value: unknown;\n};\n"]}