@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/components/mg-popover.js

@@ -1,203 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createID, i as isTagName } from './components.utils.js';
-import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$3 } from './mg-button2.js';
-import { d as defineCustomElement$2 } from './mg-icon2.js';
-import { c as createPopper } from './popper.js';
-
-const mgPopoverCss = "mg-popover{display:contents}mg-popover::slotted(*){display:inline-block}.mg-popover{display:none;padding:1.5rem;z-index:1000;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow,.mg-popover__arrow::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover__arrow{visibility:hidden}.mg-popover__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:-6px}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:-6px}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:-6px}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:-6px}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}";
-
-const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.displayChange = createEvent(this, "display-change", 7);
-    this.closeButtonId = '';
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = createID('mg-popover');
-    /**
-     * Popover placement
-     */
-    this.placement = 'bottom';
-    /**
-     * Define if popover has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Display popover
-     */
-    this.display = false;
-    /**
-     * Disable popover
-     */
-    this.disabled = false;
-    /**
-     * Check if clicked outside of component
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
-     */
-    this.clickOutside = (event) => {
-      if (!this.disabled && event.target.closest(`mg-popover`) !== this.element) {
-        this.display = false;
-      }
-    };
-    /**
-     * Show popover
-     *
-     * @returns {void}
-     */
-    this.show = () => {
-      // Make the popover visible
-      this.popover.setAttribute('data-show', '');
-      // Enable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-      // Update its position
-      this.popper.update();
-      // hide when click outside
-      // setTimeout is used to prevent event to trigger after creation
-      setTimeout(() => {
-        document.addEventListener('click', this.clickOutside, false);
-      }, 0);
-    };
-    /**
-     * Hide popover
-     *
-     * @returns {void}
-     */
-    this.hide = () => {
-      // Hide the popover
-      this.popover.removeAttribute('data-show');
-      // Disable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove event listener
-      document.removeEventListener('click', this.clickOutside, false);
-    };
-    /**
-     * Handle action for close button
-     *
-     * @returns {void}
-     */
-    this.handleCloseButton = () => {
-      this.display = false;
-    };
-  }
-  handleDisplay(newValue) {
-    if (newValue) {
-      this.show();
-    }
-    else {
-      this.hide();
-    }
-    this.displayChange.emit(newValue);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-  }
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void}
-   */
-  componentDidLoad() {
-    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(', ')}`);
-    }
-    // Set close button id
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
-    // Get popover content
-    this.popover = this.element.shadowRoot.querySelector(`#${this.identifier}`);
-    //Get interactive element (first element without slot attribute)
-    const interactiveElement = this.element.querySelector(':not([slot])');
-    // Add aria attributes
-    interactiveElement.setAttribute('aria-controls', this.identifier);
-    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-    // Create popperjs popover
-    this.popper = createPopper(interactiveElement, this.popover, {
-      placement: this.placement,
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 10],
-          },
-        },
-      ],
-    });
-    // Add events to toggle display
-    interactiveElement.addEventListener('click', () => {
-      if (!this.disabled)
-        this.display = !this.display;
-    });
-    // Add events to hide popover
-    this.element.addEventListener('keydown', e => {
-      if (!this.disabled && e.code === 'Escape')
-        this.display = false;
-    });
-    this.handleDisplay(this.display);
-  }
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-  static get style() { return mgPopoverCss; }
-}, [1, "mg-popover", {
-    "identifier": [1],
-    "placement": [1],
-    "closeButton": [4, "close-button"],
-    "display": [1028],
-    "disabled": [1028]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-popover", "mg-button", "mg-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-popover":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgPopover$1);
-      }
-      break;
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { M as MgPopover$1, d as defineCustomElement$1 } from './mg-popover2.js';
 
 const MgPopover = MgPopover$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/mg-popover2.js

@@ -0,0 +1,212 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createID, C as ClassList, g as getWindows, i as isTagName } from './components.utils.js';
+import { i as initLocales } from './index2.js';
+import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$2 } from './mg-card2.js';
+import { d as defineCustomElement$1 } from './mg-icon2.js';
+import { c as createPopper } from './popper.js';
+
+const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}.mg-popover{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color))}.mg-popover mg-card{position:relative;z-index:-1}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow{position:absolute;visibility:hidden;width:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem)}.mg-popover__arrow:before{visibility:visible;content:\"\";position:absolute}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{height:1rem}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before{border-top:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{width:1rem}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before{border-left:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{border-right:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left-start],.mg-popover[data-popper-placement^=left-end],.mg-popover[data-popper-placement^=right-start],.mg-popover[data-popper-placement^=right-end]{padding:0 1rem}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow{height:calc(3rem + 2 * var(--mg-card-border-radius))}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow:before{top:var(--mg-card-border-radius)}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top]{padding-bottom:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom]{padding-top:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=left]{padding-right:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=right]{padding-left:0}.mg-popover ::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)}";
+
+const MgPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.displayChange = createEvent(this, "display-change", 7);
+    this.closeButtonId = '';
+    // Classes
+    this.classArrowHide = `mg-popover--arrow-hide`;
+    /**
+     * Check if clicked outside of component
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.clickOutside = (event) => {
+      if (!this.disabled && event.target.closest(`mg-popover`) !== this.element) {
+        this.display = false;
+      }
+    };
+    /**
+     * Show popover
+     *
+     * @returns {void}
+     */
+    this.show = () => {
+      // Make the popover visible
+      this.popover.setAttribute('data-show', '');
+      // Enable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+      // Update its position
+      this.popper.update();
+      // hide when click outside
+      // setTimeout is used to prevent event to trigger after creation
+      setTimeout(() => {
+        this.windows.forEach((localWindow) => {
+          localWindow.addEventListener('click', this.clickOutside, false);
+        });
+      }, 0);
+    };
+    /**
+     * Hide popover
+     *
+     * @returns {void}
+     */
+    this.hide = () => {
+      // Hide the popover
+      this.popover.removeAttribute('data-show');
+      // Disable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+      // Remove event listener
+      this.windows.forEach((localWindow) => {
+        localWindow.removeEventListener('click', this.clickOutside, false);
+      });
+    };
+    /**
+     * Handle action for close button
+     *
+     * @returns {void}
+     */
+    this.handleCloseButton = () => {
+      this.display = false;
+    };
+    this.identifier = createID('mg-popover');
+    this.placement = 'bottom';
+    this.arrowHide = false;
+    this.closeButton = false;
+    this.display = false;
+    this.disabled = false;
+    this.classList = new ClassList(['mg-popover']);
+  }
+  validateArrowHide(newValue) {
+    if (newValue)
+      this.classList.add(this.classArrowHide);
+    else
+      this.classList.delete(this.classArrowHide);
+  }
+  handleDisplay(newValue) {
+    if (newValue) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+    this.displayChange.emit(newValue);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad() {
+    // Get windows to attach events
+    this.windows = getWindows(window);
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    this.validateArrowHide(this.arrowHide);
+  }
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    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(', ')}`);
+    }
+    // Set close button id
+    if (this.closeButton) {
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    // Get popover content
+    this.popover = this.element.shadowRoot.getElementById(this.identifier);
+    //Get interactive element (first element without slot attribute)
+    const interactiveElement = this.element.querySelector(':not([slot])');
+    // Add aria attributes
+    interactiveElement.setAttribute('aria-controls', this.identifier);
+    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+    // Create popperjs popover
+    this.popper = createPopper(interactiveElement, this.popover, {
+      placement: this.placement,
+      strategy: 'fixed',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 0],
+          },
+        },
+      ],
+    });
+    // Add events to toggle display
+    interactiveElement.addEventListener('click', () => {
+      if (!this.disabled)
+        this.display = !this.display;
+    });
+    // Add events to hide popover
+    this.element.addEventListener('keydown', e => {
+      if (!this.disabled && e.code === 'Escape')
+        this.display = false;
+    });
+    this.handleDisplay(this.display);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classList.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "arrowHide": ["validateArrowHide"],
+    "display": ["handleDisplay"]
+  }; }
+  static get style() { return mgPopoverCss; }
+}, [1, "mg-popover", {
+    "identifier": [1],
+    "placement": [1],
+    "arrowHide": [4, "arrow-hide"],
+    "closeButton": [4, "close-button"],
+    "display": [1028],
+    "disabled": [1028],
+    "classList": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-popover", "mg-button", "mg-card", "mg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgPopover);
+      }
+      break;
+    case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MgPopover as M, defineCustomElement as d };

package/dist/components/mg-skip-links.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgSkipLinks extends Components.MgSkipLinks, HTMLElement {}
+export const MgSkipLinks: {
+  prototype: MgSkipLinks;
+  new (): MgSkipLinks;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,80 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { i as initLocales } from './index2.js';
+
+const mgSkipLinksCss = ".mg-skip-links{position:absolute;transform:translateY(-100%);opacity:0;background:hsl(var(--color-light))}.mg-skip-links:focus-within{position:relative;transform:translateY(0);opacity:1}.mg-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin:0;padding:0.64rem 1.8rem;list-style:none}.mg-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-skip-links__link:hover{background:hsl(var(--color-dark), 0.1)}";
+
+const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.goToAnchor = createEvent(this, "go-to-anchor", 7);
+    /***********
+     * Methods *
+     **********/
+    /**
+     * Handle link click and emit go-to-anchor event
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.handleLinkCLick = (event) => {
+      event.currentTarget.blur();
+      this.goToAnchor.emit(event.currentTarget.getAttribute('href'));
+    };
+    this.links = undefined;
+  }
+  validateLinks(links) {
+    if (links === undefined ||
+      links.length === 0 ||
+      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')) {
+      throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateLinks(this.links);
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list" }, this.links.map(link => (h("li", null, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "links": ["validateLinks"]
+  }; }
+  static get style() { return mgSkipLinksCss; }
+}, [1, "mg-skip-links", {
+    "links": [1040]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-skip-links"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-skip-links":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgSkipLinks$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MgSkipLinks = MgSkipLinks$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgSkipLinks, defineCustomElement };