@mgdis/mg-components 4.2.0 → 5.0.0

package/dist/collection/variables.scss

@@ -1,212 +0,0 @@
-:root {
-  /*
-    Fonts
-  */
-
-  --font-size: 1.3rem;
-  --line-height: 1.4;
-
-  /* Open Sans is used for the body (mostly all texts) */
-  --font-family: 'Open Sans', sans-serif;
-
-  /* Headings (h1 to h6) font can be customized */
-  --font-family-heading: var(--font-family);
-
-  /* Font colors */
-  --color-font-light: var(--color-light);
-  --color-font-dark: var(--color-dark);
-  /*
-    Colors
-    https://jira.mgdis.fr/browse/PDA9-690
-   */
-
-  /* Neutral */
-  /* #fefefe; */
-  /* rgb(254, 254, 254); */
-  --color-neutral-h: 0;
-  --color-neutral-s: 0%;
-  --color-neutral-l: 99.6%;
-  --color-neutral: var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l);
-
-  /* Warning */
-  /* #ffc33e */
-  /* rgb(255, 195, 62); */
-  --color-warning-h: 41;
-  --color-warning-s: 100%;
-  --color-warning-l: 62.2%;
-  --color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
-
-  /* Success */
-  /* #32d59c */
-  /* rgb(50, 213, 156); */
-  --color-success-h: 159;
-  --color-success-s: 66%;
-  --color-success-l: 51.6%;
-  --color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
-
-  /* Info */
-  /* #005e9c; */
-  /* rgb(0, 94, 156); */
-  --color-info-h: 204;
-  --color-info-s: 100%;
-  --color-info-l: 30.6%;
-  --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
-
-  /* Danger */
-  /* #db1f29; */
-  /* rgb(219, 31, 41); */
-  --color-danger-h: 357;
-  --color-danger-s: 75%;
-  --color-danger-l: 49%;
-  --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
-
-  /* Dark */
-  /* #15282e; */
-  /* rgb(21, 40, 46); */
-  --color-dark-h: 194;
-  --color-dark-s: 37.3%;
-  --color-dark-l: 13.1%;
-  --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
-
-  /* Light */
-  /* white; (#ffffff) */
-  /* rgb(255, 255, 255); */
-  --color-light-h: 0;
-  --color-light-s: 0%;
-  --color-light-l: 100%;
-  --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
-
-  /* Primary */
-  --color-primary-h: hsl(var(--color-dark-h));
-  --color-primary-s: hsl(var(--color-dark-s));
-  --color-primary-l: hsl(var(--color-dark-l));
-  --color-primary: hsl(var(--color-dark));
-
-  /* Secondary */
-  --color-secondary-h: hsl(var(--color-neutral-h));
-  --color-secondary-s: hsl(var(--color-neutral-s));
-  --color-secondary-l: hsl(var(--color-neutral-l));
-  --color-secondary: hsl(var(--color-neutral));
-
-  /* Shadow */
-  --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
-
-  /*
-    Global
-   */
-  --default-size: 3.5rem;
-
-  /*
-    <mg-icon>
-   */
-  --mg-icon-small-size: 1.2rem;
-  --mg-icon-regular-size: 1.6rem;
-  --mg-icon-large-size: 2.4rem;
-  --mg-icon-extra-large-size: 3.6rem;
-
-  /*
-    <mg-button>
-   */
-
-  --mg-button-border-radius: 0.3rem;
-  --mg-button-icon-border-radius: var(--default-size);
-  --mg-button-disabled-opacity: 0.6;
-  --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
-  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
-
-  /* Primary */
-  --mg-button-primary-color-h: var(--color-dark-h);
-  --mg-button-primary-color-s: var(--color-dark-s);
-  --mg-button-primary-color-l: var(--color-dark-l);
-  --mg-button-primary-font-color: var(--color-neutral);
-
-  /* Secondary */
-  --mg-button-secondary-color-h: var(--color-neutral-h);
-  --mg-button-secondary-color-s: var(--color-neutral-s);
-  --mg-button-secondary-color-l: var(--color-neutral-l);
-  --mg-button-secondary-font-color: var(--color-dark);
-
-  /*
-    <mg-tag>
-   */
-  --mg-tag-height: 2.3rem;
-  --mg-tag-border-radius: 0.5rem;
-  --mg-tag-font-size: 1.2rem;
-
-  /*
-  <mg-badge>
-  */
-  --mg-badge-size: 1.6rem;
-  --mg-badge-font-size: 1.1rem;
-
-  /*
-    <mg-tooltip>
-   */
-  --mg-tooltip-border-radius: 0.5rem;
-  --mg-tooltip-background-color: var(--color-dark);
-  --mg-tooltip-font-color: var(--color-font-light);
-
-  /*
-    <mg-popover>
-   */
-  --mg-popover-background-color: var(--color-light);
-  --mg-popover-font-color: var(--color-font-dark);
-  --mg-popover-title-font-size: 1.4rem;
-
-  /*
-    <mg-message>
-   */
-  --mg-message-border-radius: 0.3rem;
-
-  /*
-    <mg-modal>
-   */
-  --mg-modal-border-radius: 0.5rem;
-  --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.2rem;
-
-  /*
-    <mg-panel>
-   */
-
-  --mg-panel-border-radius: 0.5rem;
-  --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
-  --mg-panel-content-padding: 1.5rem;
-
-  /*
-    Layout
-   */
-  --mg-grid-spacing: 1rem;
-
-  /*
-    Forms
-   */
-
-  /*
-    <mg-input-...>
-   */
-  --mg-inputs-border-width: 0.1rem;
-  --mg-inputs-border-radius: 0.3rem;
-  --mg-inputs-color: #b5c2c9;
-  --mg-inputs-spacer: 1rem;
-
-  /* Error message background */
-  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
-
-  /* Input focus shadow */
-  /* #b5c2c9 */
-  /* rgb(0, 221, 255); */
-  /* hsl(188, 100%, 50%); */
-  --mg-inputs-color-shadow-focus-hsl: 188, 100%, 50%;
-
-  /*
-    <mg-input-toggle>
-  */
-  --mg-input-toggle-border-radius-ratio: 2;
-
-  /*
-    <mg-input-checkbox>
-    <mg-input-radio>
-   */
-  --mg-input-check-size: 1.3rem;
-}

package/dist/esm/mg-popover.entry.js

@@ -1,167 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-120f47fd.js';
-import { c as createID, i as initLocales, a as isTagName } from './index-7efedd97.js';
-import { c as createPopper } from './popper-93ecb064.js';
-
-const mgPopoverCss = "mg-popover.sc-mg-popover{display:contents}mg-popover.sc-mg-popover-s>*{display:inline-block}.mg-popover.sc-mg-popover{display:none;padding:1.5rem;z-index:9999;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].sc-mg-popover{display:block}.mg-popover.sc-mg-popover mg-button.sc-mg-popover{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.sc-mg-popover .mg-popover__arrow.sc-mg-popover,.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover{visibility:hidden}.mg-popover.sc-mg-popover .mg-popover__arrow.sc-mg-popover::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{bottom:-6px}.mg-popover[data-popper-placement^=bottom].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{top:-6px}.mg-popover[data-popper-placement^=left].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{right:-6px}.mg-popover[data-popper-placement^=right].sc-mg-popover>.mg-popover__arrow.sc-mg-popover{left:-6px}.mg-popover__title.sc-mg-popover-s>[slot=title],.mg-popover__title .sc-mg-popover-s>[slot=title]{margin:0 0 1rem;font-size:var(--mg-popover-title-font-size);font-weight:600}";
-
-const MgPopover = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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) => {
-      var _a;
-      if (!this.disabled && ((_a = event.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
-        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 slotedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slotedTitleElement && !isTagName(slotedTitleElement, 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.querySelector(`#${this.identifier}`);
-    //Get interactive element
-    const interactiveElement = this.element.firstElementChild;
-    // 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,
-      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.disabled && 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 getElement(this); }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-};
-MgPopover.style = mgPopoverCss;
-
-export { MgPopover as mg_popover };