@mgdis/mg-components 5.18.0 → 5.19.1

package/dist/collection/components/molecules/mg-tabs/mg-tabs.css

@@ -1,99 +0,0 @@
-.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular {
-  padding: 1rem 2rem;
-}
-.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,
-.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=label]),
-.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=metadata]),
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=label]),
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=metadata]) {
-  font-size: var(--font-size);
-}
-.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--horizontal {
-  padding-bottom: calc(1rem - 0.3rem);
-}
-.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--vertical {
-  padding-left: calc(2rem - 0.3rem);
-}
-
-.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large {
-  padding: 1.5rem 3rem;
-}
-.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,
-.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=label]),
-.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=metadata]),
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=label]),
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=metadata]) {
-  font-size: calc(var(--font-size) + 0.2rem);
-}
-.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--horizontal {
-  padding-bottom: calc(1.5rem - 0.3rem);
-}
-.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,
-.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--vertical {
-  padding-left: calc(3rem - 0.3rem);
-}
-
-.mg-tabs__navigation-button {
-  display: flex;
-  align-items: center;
-  column-gap: var(--mg-tabs-navigation-button-column-gap, 1rem);
-  background-color: unset;
-  border: none;
-  font-family: var(--font-family);
-  font-weight: 400;
-  color: hsl(var(--mg-tabs-color-hsl, var(--color-dark)));
-  line-height: var(--line-height);
-  text-decoration: none;
-  white-space: nowrap;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-.mg-tabs__navigation-button:disabled, .mg-tabs__navigation-button--disabled {
-  cursor: default;
-  opacity: var(--mg-disabled-opacity);
-}
-.mg-tabs__navigation-button:focus-visible {
-  z-index: 10;
-}
-.mg-tabs__navigation-button:hover:not(.mg-tabs__navigation-button--disabled), .mg-tabs__navigation-button:focus-visible:not(.mg-tabs__navigation-button--disabled) {
-  background-color: hsl(var(--mg-tabs-focused-background-color-hsl), 0.1);
-}
-.mg-tabs__navigation-button.mg-tabs__navigation-button--active {
-  color: hsl(var(--mg-tabs-color-active-hsl));
-  font-weight: 600;
-}
-.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--horizontal {
-  border-bottom-color: hsl(var(--mg-tabs-border-color-active-hsl));
-}
-.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--vertical {
-  border-left-color: hsl(var(--mg-tabs-border-color-active-hsl));
-}
-.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden {
-  display: none;
-}
-.mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal {
-  border-bottom: 0.3rem solid transparent;
-}
-.mg-tabs__navigation-button.mg-tabs__navigation-button--vertical {
-  border-left: 0.3rem solid transparent;
-}
-
-.mg-tabs__header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  border-bottom: var(--mg-tabs-border-bottom);
-}
-.mg-tabs__content-container:focus-visible {
-  outline: none;
-}
-.mg-tabs__navigation-button-text {
-  flex: 0 0 content;
-}

package/dist/collection/styles/a11y.scss

@@ -1,36 +0,0 @@
-/**
- * A11Y
- */
-
-// Make content available only for screen reader
-// https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
-@mixin sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-.sr-only {
-  @include sr-only();
-}
-
-// Remove outline for non-keyboard :focus
-// https://www.tpgi.com/focus-visible-and-backwards-compatibility/
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}

package/dist/collection/styles/fonts.scss

@@ -1,21 +0,0 @@
-/**
- * Open Sans
- * https://fonts.google.com/specimen/Open+Sans
- */
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 600;
-  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 700;
-  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
-}

package/dist/collection/styles/form.scss

@@ -1,3 +0,0 @@
-.is-asterisk {
-  color: hsl(var(--color-danger));
-}

package/dist/collection/styles/global.scss

@@ -1,80 +0,0 @@
-/**
- * Here we building the CSS for the component library
- */
-
-// Normalize CSS : https://necolas.github.io/normalize.css/
-@import '~normalize.css/normalize.css';
-
-// Fonts
-@import './fonts.scss';
-
-// Variables
-@import './variables.css';
-
-// Main style
-@import './main.scss';
-
-// Typography style
-@import './typography.scss';
-
-// Accessibility
-@import './a11y.scss';
-
-// Form
-// already included by mg-form
-// @import './form.scss';
-
-// Layout
-@import './layout.scss';
-
-// Utilities
-@import './utilities.scss';
-
-/* Atoms */
-
-// <mg-badge>
-@import '../components/atoms/mg-badge/mg-badge.scss';
-
-// <mg-button>
-@import '../components/atoms/mg-button/mg-button.scss';
-
-// <mg-character-left>
-@import '../components/atoms/mg-character-left/mg-character-left.scss';
-
-// <mg-icon>
-@import '../components/atoms/mg-icon/mg-icon.scss';
-
-// <mg-input-title>
-//! For now input style will not be included
-// @import '../components/atoms/mg-input-title/mg-input-title.scss';
-
-// <mg-tag>
-@import '../components/atoms/mg-tag/mg-tag.scss';
-
-// <mg-tooltip>
-@import '../components/atoms/mg-tooltip/mg-tooltip.scss';
-
-/* Molecules */
-
-// <mg-input-...>
-//! For now input style will not be included
-// @import '../components/molecules/inputs/styles/mg-input.scss';
-// @import '../components/molecules/inputs/styles/mg-input-box.scss';
-// @import '../components/molecules/inputs/styles/mg-input-charleft.scss';
-// @import '../components/molecules/inputs/styles/mg-input-fieldset.scss';
-// @import '../components/molecules/inputs/styles/mg-input-width.scss';
-
-// <mg-form>
-@import '../components/molecules/mg-form/mg-form.scss';
-
-// <mg-message>
-@import '../components/molecules/mg-message/mg-message.scss';
-
-// <mg-pagination>
-@import '../components/molecules/mg-pagination/mg-pagination.scss';
-
-// <mg-popover>
-@import '../components/molecules/mg-popover/mg-popover.scss';
-
-// <mg-tabs>
-@import '../components/molecules/mg-tabs/mg-tabs.scss';

package/dist/collection/styles/layout.scss

@@ -1,29 +0,0 @@
-@use 'sass:math';
-
-// Number of column
-$grid-columns: 12;
-
-// Calculate width
-@function round-width($i) {
-  $width: math.div(100 * $i, $grid-columns);
-  @return #{$width}#{'%'};
-}
-
-.mg-grid {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-// Those columns will equaly share space
-.mg-grid__col {
-  flex: 1 0 0;
-  padding: 0 var(--mg-grid-spacing);
-
-  // Building columns
-  @for $i from 1 through $grid-columns {
-    &.mg-grid__col-#{$i} {
-      flex: 0 0 auto;
-      width: round-width($i);
-    }
-  }
-}

package/dist/collection/styles/main.scss

@@ -1,23 +0,0 @@
-// Make all element use the border box model
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/**
- * We set html font size to 62.5% to get 10px in most of the case.
- * This is a common use for an easiest calculation : 1rem = 10px
- * Default font size will be defined in body element.
- */
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  font-size: var(--font-size);
-  font-family: var(--font-family);
-  line-height: var(--line-height);
-  -webkit-font-smoothing: antialiased;
-}

package/dist/collection/styles/mg-icon-animation.scss

@@ -1,6 +0,0 @@
-@mixin rotate($selector, $duration) {
-  transition: $duration;
-  &--rotate#{$selector} {
-    transform: rotate(180deg);
-  }
-}

package/dist/collection/styles/navigation-button.scss

@@ -1,77 +0,0 @@
-@use 'sass:map';
-
-$border-bottom-size: 0.3rem;
-$font-size-large: calc(var(--font-size) + 0.2rem);
-$navigation-button-column-gap: 1rem;
-
-@mixin navigation-button($element, $button-sizes) {
-  @each $name, $size in $button-sizes {
-    .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
-    .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
-      padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
-      height: #{map.get($size, 'height')};
-      &,
-      ::slotted([slot='label']),
-      ::slotted([slot='metadata']) {
-        @if $name == 'regular' {
-          font-size: var(--font-size);
-        } @else {
-          font-size: $font-size-large;
-        }
-      }
-      &.#{$element}__navigation-button--horizontal {
-        padding-bottom: calc(#{map.get($size, 'vertical')} - #{$border-bottom-size});
-      }
-      &.#{$element}__navigation-button--vertical {
-        padding-left: calc(#{map.get($size, 'horizontal')} - #{$border-bottom-size});
-      }
-    }
-  }
-
-  .#{$element}__navigation-button {
-    display: flex;
-    align-items: center;
-    column-gap: var(--#{$element}-navigation-button-column-gap, $navigation-button-column-gap);
-    background-color: unset;
-    border: none;
-    font-family: var(--font-family);
-    font-weight: 400;
-    color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
-    line-height: var(--line-height);
-    text-decoration: none;
-    white-space: nowrap;
-    box-sizing: border-box;
-    cursor: pointer;
-    &:disabled,
-    &--disabled {
-      cursor: default;
-      opacity: var(--mg-disabled-opacity);
-    }
-    &:focus-visible {
-      z-index: 10;
-    }
-    &:hover:not(.#{$element}__navigation-button--disabled),
-    &:focus-visible:not(.#{$element}__navigation-button--disabled) {
-      background-color: hsl(var(--#{$element}-focused-background-color-hsl), 0.1);
-    }
-    &.#{$element}__navigation-button--active {
-      color: hsl(var(--#{$element}-color-active-hsl));
-      font-weight: 600;
-      &.#{$element}__navigation-button--horizontal {
-        border-bottom-color: hsl(var(--#{$element}-border-color-active-hsl));
-      }
-      &.#{$element}__navigation-button--vertical {
-        border-left-color: hsl(var(--#{$element}-border-color-active-hsl));
-      }
-    }
-    &.#{$element}__navigation-button--hidden {
-      display: none;
-    }
-    &.#{$element}__navigation-button--horizontal {
-      border-bottom: $border-bottom-size solid transparent;
-    }
-    &.#{$element}__navigation-button--vertical {
-      border-left: $border-bottom-size solid transparent;
-    }
-  }
-}

package/dist/collection/styles/reset-mg-card-slotted-variables.scss

@@ -1,11 +0,0 @@
-@mixin reset-slot-card-variables() {
-  ::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;
-  }
-}

package/dist/collection/styles/typography.scss

@@ -1,82 +0,0 @@
-/**
- * Paragraph
- */
-
-p {
-  margin: 0;
-  & + p {
-    margin-top: 1rem;
-  }
-}
-
-/**
- * Headings
- *
- * Classes can also be used on element to match attending, for exemples :
- * <h4 class="h3">blu</h4>
- * <div role="heading" aria-level="4" class="h4">blu</div>
- */
-
-@for $i from 1 through 6 {
-  h#{$i},
-  .h#{$i} {
-    font-family: var(--font-family-heading);
-  }
-}
-
-//h1
-h1,
-.h1 {
-  font-size: calc(var(--font-size) * 1.85);
-}
-
-//h2
-h2,
-.h2 {
-  font-size: calc(var(--font-size) * 1.65);
-}
-
-//h3
-h3,
-.h3 {
-  font-size: calc(var(--font-size) * 1.35);
-}
-
-//h4
-h4,
-.h4 {
-  font-size: calc(var(--font-size) * 1.2);
-}
-
-//h5
-h5,
-.h5 {
-  font-size: calc(var(--font-size) * 1.1);
-}
-
-//h6
-h6,
-.h6 {
-  font-size: calc(var(--font-size) * 0.8);
-}
-
-/**
- * Links
- */
-a {
-  color: hsl(var(--color-primary));
-  text-decoration: underline;
-
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-  }
-}
-
-/**
-* Small
-*/
-small {
-  font-size: 0.9em;
-}

package/dist/collection/styles/utilities.scss

@@ -1,21 +0,0 @@
-// Helper to manage space between elements
-.mg-group-elements {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-
-  // remove default margin
-  & > * {
-    margin: 0 !important; // I would say important is allowed in utility classes ?
-  }
-
-  // Align button on right side
-  &.mg-group-elements--align-right {
-    justify-content: flex-end;
-  }
-}
-
-.no-padding {
-  padding: 0;
-}

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

@@ -1,12 +0,0 @@
-import { setPageContent, expect, describe, testEach } from "../utils/playwright.e2e.test.utils";
-describe('typography', () => {
-  testEach(['1', '2', '3', '4', '5', '6'].flatMap(tag => [true, false].map(smallTag => (smallTag ? `<h${tag}><small>Heading ${tag} small</small></h${tag}>` : `<h${tag}>Heading ${tag}</h${tag}>`))))('Should render heading %s', async (page, html) => {
-    await setPageContent(page, html);
-    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
-  });
-  testEach(['<p>paragraph</p>', '<p><strong>strong</strong></p>', '<p><small>small</small></p>'])('Should render paragraph %s', async (page, html) => {
-    await setPageContent(page, html);
-    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
-  });
-});
-//# sourceMappingURL=typography.e2e.playwright.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"typography.e2e.playwright.js","sourceRoot":"","sources":["../../src/test/typography.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAY,MAAM,oCAAoC,CAAC;AAE1G,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,QAAQ,CACN,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAC3C,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,mBAAmB,GAAG,oBAAoB,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,YAAY,GAAG,MAAM,GAAG,GAAG,CAAC,CAAC,CAC3I,CACF,CAAC,0BAA0B,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;IACnE,MAAM,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEjC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,CAAC,kBAAkB,EAAE,gCAAgC,EAAE,6BAA6B,CAAC,CAAC,CAAC,4BAA4B,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;IACnK,MAAM,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEjC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { setPageContent, expect, describe, testEach, PageType } from '../utils/playwright.e2e.test.utils';\n\ndescribe('typography', () => {\n  testEach(\n    ['1', '2', '3', '4', '5', '6'].flatMap(tag =>\n      [true, false].map(smallTag => (smallTag ? `<h${tag}><small>Heading ${tag} small</small></h${tag}>` : `<h${tag}>Heading ${tag}</h${tag}>`)),\n    ),\n  )('Should render heading %s', async (page: PageType, html: string) => {\n    await setPageContent(page, html);\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n\n  testEach(['<p>paragraph</p>', '<p><strong>strong</strong></p>', '<p><small>small</small></p>'])('Should render paragraph %s', async (page: PageType, html: string) => {\n    await setPageContent(page, html);\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n});\n"]}

package/dist/esm/mg-menu.conf-012fc9b4.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf-012fc9b4.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;MAOa,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,QAAgB;EAC7E,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvF,EAAE;AAEF;;;;;;MAMa,YAAY,GAAG,CAAC,MAAc,EAAE,MAAc;EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,EAAE;AAEF;;;MAGa,UAAU,GAAG,gDAAgD;AAE1E;;;;;;MAMa,UAAU,GAAG,CAAC,IAAY,EAAE,MAAc;EACrD,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACrE,OAAO,EAAE,CAAC;GACX;EACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,EAAE;AAEF;;;;;;;;AAQO,MAAM,iBAAiB,GAAG,CAAC,OAAoB,EAAE,QAAiB,EAAE,aAAqB;;EAE9F,MAAM,oBAAoB,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpE,MAAM,WAAW,GAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,CAAC,CAAC;EAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,IAAI,aAAa,CAAC;;EAE7F,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;;EAE/C,OAAO;IACL,MAAM;IACN,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC;;ACvDD,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAG,CAAC,OAAoB,KAA4D,iBAAiB,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa;;ACV9J;;;IAGY;AAAZ,WAAY,SAAS;EACnB,kCAAqB,CAAA;EACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;","names":[],"sources":["src/utils/locale.utils.ts","src/locales/index.ts","src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n  return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n    return '';\n  }\n  return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n  // Get local\n  const closestLangAttribute: HTMLElement = element.closest('[lang]');\n  const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n  // Only keep first subtag\n  const localeSubtag = locale.split('-').shift();\n  // Return\n  return {\n    locale,\n    messages: messages[localeSubtag] || messages[defaultLocale],\n  };\n};\n","import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { getLocaleMessages } from '../utils/locale.utils';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = (element: HTMLElement): { locale: string; messages: Record<string, unknown> } => getLocaleMessages(element, messages, defaultLocale);\n","import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}

package/dist/mg-components/p-1d7d6fa0.js

@@ -1,2 +0,0 @@
-const e={required:"This field is required.",date:{badInput:'The date format must be <span aria-hidden="true">mm/dd/yyyy</span><span class="sr-only">m m / d d / y y y y</span> and the date must be greater than {min}',min:"The date cannot be earlier than {min}",max:"The date cannot be later than {max}",minMax:"The date must be between {min} and {max}"},numeric:{min:"The value cannot be less than {min}",max:"The value cannot be greater than {max}",minMax:"The value must be between {min} et {max}"}};const t="{counter} characters left.";const a={select:{placeholder:"Select a value"},checkbox:{selectedValues:"{nb} selected values",selectedValue:"{nb} selected value",editButton:"Edit",selectButton:"Select values",showButton:"Show",label:"Enter a value",result:"result",results:"results",searchResults:"Search result(s) list.",noResult:"No result.",sections:{selected:{title:"Selected",titlePlurial:"Selected",action:"Unselect all"},notSelected:{title:"Not selected",titlePlurial:"Not selected",action:"Select all"}}}};const s={required:'Fields with a <strong class="is-asterisk">*</strong> are required',requiredSingle:'Field with a <strong class="is-asterisk">*</strong> is required',allRequired:"All fields are required",allRequiredSingle:"The field is required"};const n={closeButton:"Close message"};const l={closeButton:"Close modal"};const r={label:"Pagination",page:"page",pages:"pages",nextPage:"Next page",previousPage:"Previous page",selectPage:"Select the page to display."};const i={editLabel:"Edit section title."};const o={navLabel:"Quick access"};const c={confirm:"Confirm",cancel:"Cancel",close:"Close",next:"next",previous:"previous"};const u={moreLabel:"Additional menu",badgeLabel:"Include notification(s)"};const d={label:"Actions"};const m={errors:e,nbCharLeft:t,input:a,form:s,message:n,modal:l,pagination:r,panel:i,skipLinks:o,general:c,plusMenu:u,actionMore:d};const p={required:"Ce champ est obligatoire.",date:{badInput:'Le format de la date doit être du type <span aria-hidden="true">jj/mm/aaaa</span><span class="sr-only">j j / m m / a a a a</span> et la date supérieure au {min}',min:"La date ne peut pas être antérieure au {min}",max:"La date ne peut pas être postérieure au {max}",minMax:"La date doit être comprise entre le {min} et le {max}"},numeric:{min:"La valeur ne peut pas être inférieure à {min}",max:"La valeur ne peut pas être supérieure à {max}",minMax:"La valeur doit être comprise entre {min} et {max}"}};const g="{counter} caractères disponibles.";const b={select:{placeholder:"Sélectionnez une valeur"},checkbox:{selectedValues:"{nb} valeurs selectionnées",selectedValue:"{nb} valeur selectionnée",editButton:"Modifier",selectButton:"Sélectionner des valeurs",showButton:"Voir",label:"Saisissez une valeur",result:"resultat",results:"resultats",searchResults:"List de resultat(s) de la recherche.",noResult:"Aucun resultat.",sections:{selected:{title:"Sélectionné",titlePlurial:"Sélectionnés",action:"Tout désélectionner"},notSelected:{title:"Non sélectionné",titlePlurial:"Non sélectionnés",action:"Tout sélectionner"}}}};const h={required:'Les champs marqués d\'un <strong class="is-asterisk">*</strong> sont obligatoires',requiredSingle:'Le champ marqué d\'un <strong class="is-asterisk">*</strong> est obligatoire',allRequired:"Tous les champs sont obligatoires",allRequiredSingle:"Le champ est obligatoire"};const v={closeButton:"Fermer le message"};const x={closeButton:"Fermer la modale"};const f={label:"Pagination",page:"page",pages:"pages",nextPage:"Page suivante",previousPage:"Page précédente",selectPage:"Sélectionner la page à afficher."};const L={editLabel:"Modifier le titre de la section."};const S={navLabel:"Accès rapide"};const q={confirm:"Valider",cancel:"Annuler",close:"Fermer",next:"suivant",previous:"précédent"};const y={moreLabel:"Menu complémentaire",badgeLabel:"Notification(s) incluse(s)"};const P={label:"Actions"};const T={errors:p,nbCharLeft:g,input:b,form:h,message:v,modal:x,pagination:f,panel:L,skipLinks:S,general:q,plusMenu:y,actionMore:P};const k=(e,t,a)=>new Intl.NumberFormat(t,{style:"currency",currency:a}).format(e);const w=(e,t)=>new Intl.NumberFormat(t).format(e);const M=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;const B=(e,t)=>{if(typeof e!=="string"||e===""||!M.test(e)){return""}return new Intl.DateTimeFormat(t).format(new Date(e))};const C=(e,t,a)=>{const s=e.closest("[lang]");const n=Intl.NumberFormat.supportedLocalesOf(s===null||s===void 0?void 0:s.lang);const l=n.length>0?n[0]:navigator.language||a;const r=l.split("-").shift();return{locale:l,messages:t[r]||t[a]}};const R="en";const A={en:m,fr:T};const I=e=>C(e,A,R);var N;(function(e){e["VERTICAL"]="vertical";e["HORIZONTAL"]="horizontal"})(N||(N={}));const V=["regular","medium","large"];export{N as D,k as a,w as b,M as d,I as i,B as l,V as s};
-//# sourceMappingURL=p-1d7d6fa0.js.map

package/dist/mg-components/p-1d7d6fa0.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["localeCurrency","number","locale","currency","Intl","NumberFormat","style","format","localeNumber","dateRegExp","localeDate","date","test","DateTimeFormat","Date","getLocaleMessages","element","messages","defaultLocale","closestLangAttribute","closest","closestLang","supportedLocalesOf","lang","length","navigator","language","localeSubtag","split","shift","en","fr","initLocales","Direction","sizes"],"sources":["src/utils/locale.utils.ts","src/locales/index.ts","src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n  return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n    return '';\n  }\n  return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n  // Get local\n  const closestLangAttribute: HTMLElement = element.closest('[lang]');\n  const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n  // Only keep first subtag\n  const localeSubtag = locale.split('-').shift();\n  // Return\n  return {\n    locale,\n    messages: messages[localeSubtag] || messages[defaultLocale],\n  };\n};\n","import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { getLocaleMessages } from '../utils/locale.utils';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = (element: HTMLElement): { locale: string; messages: Record<string, unknown> } => getLocaleMessages(element, messages, defaultLocale);\n","import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"mappings":"k8HAOaA,EAAiB,CAACC,EAAgBC,EAAgBC,IACtD,IAAIC,KAAKC,aAAaH,EAAQ,CAAEI,MAAO,WAAYH,aAAYI,OAAON,G,MASlEO,EAAe,CAACP,EAAgBC,IACpC,IAAIE,KAAKC,aAAaH,GAAQK,OAAON,G,MAMjCQ,EAAa,gD,MAQbC,EAAa,CAACC,EAAcT,KACvC,UAAWS,IAAS,UAAYA,IAAS,KAAOF,EAAWG,KAAKD,GAAO,CACrE,MAAO,E,CAET,OAAO,IAAIP,KAAKS,eAAeX,GAAQK,OAAO,IAAIO,KAAKH,GAAM,EAWxD,MAAMI,EAAoB,CAACC,EAAsBC,EAAmBC,KAEzE,MAAMC,EAAoCH,EAAQI,QAAQ,UAC1D,MAAMC,EAAwBjB,KAAKC,aAAaiB,mBAAmBH,IAAoB,MAApBA,SAAoB,SAApBA,EAAsBI,MACzF,MAAMrB,EAASmB,EAAYG,OAAS,EAAIH,EAAY,GAAKI,UAAUC,UAAYR,EAE/E,MAAMS,EAAezB,EAAO0B,MAAM,KAAKC,QAEvC,MAAO,CACL3B,SACAe,SAAUA,EAASU,IAAiBV,EAASC,GAC9C,ECtDH,MAAMA,EAAgB,KACtB,MAAMD,EAAW,CAAEa,KAAIC,M,MAOVC,EAAehB,GAAgFD,EAAkBC,EAASC,EAAUC,G,ICPrIe,GAAZ,SAAYA,GACVA,EAAA,uBACAA,EAAA,0BACD,EAHD,CAAYA,MAAS,K,MAaRC,EAAQ,CAAC,UAAW,SAAU,gB"}

package/dist/mg-components/p-9257e8f1.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as s,g as e}from"./p-1aa89acf.js";import{i as o,D as n}from"./p-1d7d6fa0.js";const h=t=>t.nodeName==="MG-ITEM-MORE";var r;(function(t){t["BASE_INDEX"]="data-overflow-base-index";t["PROXY_INDEX"]="data-overflow-proxy-index"})(r||(r={}));class a{constructor(t,i){this.element=t;this.render=i;this.disconnect=()=>{this._resizeObserver.disconnect()};this.run=t=>{if(this._moreElement===undefined){this._moreElement=this.render();this._baseChildren=this.getInteractiveItems(this.element);if(h(this._moreElement)){this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))}this._baseChildren.forEach(((t,i)=>{t.setAttribute(r.BASE_INDEX,`${i}`);this._proxyChildren[i].setAttribute(r.PROXY_INDEX,`${i}`)}))}if(t!==undefined)this.updateDisplayedItems(t)};this.getInteractiveItems=t=>{var i;return(((i=t.children)===null||i===void 0?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))};this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((s=>{i.accWidth+=s.offsetWidth;const e=i.previousItem!==null&&i.previousItem.getAttribute("hidden")!==null;this.toggleItem(s,e&&!this.isMoreElement(s)||this.isOverflowElement(i.accWidth,s,t)||this.isMoreElement(s)&&!e);i.previousItem=s}))};this.isOverflowElement=(t,i,s)=>{if(i.previousElementSibling===null||this.isMoreElement(i))return false;else if(!this.isMoreElement(i.nextElementSibling))return t+this._moreElement.offsetWidth>s;else return t>s};this.isMoreElement=t=>t.nodeName==="MG-ITEM-MORE";this.toggleItem=(t,i)=>{const s=Number(t.getAttribute(r.BASE_INDEX));if(this.isMoreElement(t))this.toggleElement(this._moreElement,i);else if(s>=0){this.toggleElement(t,i);this.toggleElement(this._proxyChildren[s],!i)}};this.toggleElement=(t,i)=>{if(i)t.setAttribute("hidden","");else t.removeAttribute("hidden")};this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))};if(this._resizeObserver===undefined){this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))}));this._resizeObserver.observe(this.element)}this.run()}}const l=".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex}";const m=class{constructor(i){t(this,i);this.name="mg-item-more";this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(true))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,s)=>{t.addEventListener("click",(()=>{const t=i[s].shadowRoot.querySelector("a, button");if(t instanceof HTMLButtonElement||t instanceof HTMLAnchorElement)t.click()}));if(t.id.trim()!=="")t.id=`${t.id}-proxy`;i[s].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))}));return this.element};this.icon={icon:"ellipsis-vertical"};this.slotlabel={display:false};this.size=undefined;this.parentMenu=undefined}validateIcon(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.icon!=="string")throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.display!=="boolean")throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);else if(typeof t.label!=="string")this.slotlabel.label=this.messages.moreLabel}validateSize(t){if(t&&typeof t!=="string")throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=o(this.element).messages.plusMenu;this.parentMenu=this.element.closest("mg-menu");this.menuItems=Array.from(this.parentMenu.children).filter((t=>t.nodeName==="MG-MENU-ITEM"));this.validateIcon(this.icon);this.validateSlotLabel(this.slotlabel);this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new a(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(s,{role:"listitem"},i("mg-menu-item",{"data-overflow-more":true,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"sr-only":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:n.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return e(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};m.style=l;export{m as mg_item_more};
-//# sourceMappingURL=p-9257e8f1.entry.js.map

package/dist/mg-components/p-9257e8f1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isMgItemMore","element","nodeName","OverflowBehaviorElements","OverflowBehavior","constructor","render","this","disconnect","_resizeObserver","run","width","_moreElement","undefined","_baseChildren","getInteractiveItems","_proxyChildren","shadowRoot","querySelector","forEach","child","index","setAttribute","BASE_INDEX","PROXY_INDEX","updateDisplayedItems","_a","children","length","Array","from","filter","includes","availableWidth","restoreItems","acc","accWidth","previousItem","offsetWidth","isPreviousItemHidden","getAttribute","toggleItem","isMoreElement","isOverflowElement","cumulateWidth","item","previousElementSibling","nextElementSibling","isHidden","mgActionMenuindex","Number","toggleElement","removeAttribute","ResizeObserver","entries","entry","contentRect","observe","mgItemMoreCss","MgItemMore","name","renderMgMenuItemOverflowElement","moreElementMenuItem","menuItems","appendChild","cloneNode","allMenuItem","parentMenu","querySelectorAll","proxy","addEventListener","navElement","HTMLButtonElement","HTMLAnchorElement","click","id","trim","event","detail","icon","display","validateIcon","newValue","Error","validateSlotLabel","label","slotlabel","messages","moreLabel","validateSize","disconnectedCallback","overflowBehavior","componentWillLoad","initLocales","plusMenu","closest","size","componentDidLoad","h","Host","role","slot","class","direction","Direction","VERTICAL"],"sources":["src/utils/behaviors.utils.ts","src/components/molecules/mg-item-more/mg-item-more.scss?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(private element: Element, private render: () => HTMLElement) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const isPreviousItemHidden = acc.previousItem !== null && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n","@import '../../../styles/a11y.scss';\n\n:host {\n  display: flex;\n}\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: 'mg-item-more.scss',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private menuItems: HTMLMgMenuItemElement[];\n  private overflowBehavior: OverflowBehavior;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');\n    this.menuItems.forEach((child: HTMLMgMenuItemElement) => {\n      moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (proxy.id.trim() !== '') proxy.id = `${proxy.id}-proxy`;\n\n      // manage status change miror in proxy\n      allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior.disconnect();\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n    this.parentMenu = this.element.closest('mg-menu');\n    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Add overflow behavior\n   */\n  componentDidLoad(): void {\n    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        <mg-menu-item data-overflow-more data-size={this.parentMenu.size}>\n          <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n          <span class={{ 'sr-only': !this.slotlabel.display }} slot=\"label\">\n            {this.slotlabel.label}\n          </span>\n          <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n        </mg-menu-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}