@mgdis/mg-components 5.19.3 → 5.20.0

package/dist/components/mg-button2.js.map

@@ -1 +1 @@
-{"file":"mg-button2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n",":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/*# sourceMappingURL=mg-button.css.map */\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-button',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-c-button--disabled';\n  private readonly classLoading = 'mg-c-button--loading';\n  private readonly classFullWidth = 'mg-c-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop() variant: VariantType = variants[0]; // Primary\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier: string;\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type: ButtonType;\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the <button> is associated with its ancestor <form> element.\n   */\n  @Prop() form: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<MgButton['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    if (this.isIcon) {\n      this.classCollection.add(`mg-c-button--icon`);\n      if (!isValidString(this.label)) {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Add listners\n   */\n  componentDidLoad(): void {\n    setTimeout(() => {\n      const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n      // submit buttons should trigger form submition;\n      if (!!closestForm && ['submit', undefined].includes(this.type)) {\n        this.element.addEventListener('click', () => {\n          closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    }, 100);\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled?.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()} id={this.identifier}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-c-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-button2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n",":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/*# sourceMappingURL=mg-button.css.map */\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-button',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-c-button--disabled';\n  private readonly classLoading = 'mg-c-button--loading';\n  private readonly classFullWidth = 'mg-c-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop() variant: VariantType = variants[0]; // Primary\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier: string;\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type: ButtonType;\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the <button> is associated with its ancestor <form> element.\n   */\n  @Prop() form: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    if (this.isIcon) {\n      this.classCollection.add(`mg-c-button--icon`);\n      if (!isValidString(this.label)) {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Add listners\n   */\n  componentDidLoad(): void {\n    nextTick(() => {\n      const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n      // submit buttons should trigger form submition;\n      if (!!closestForm && ['submit', undefined].includes(this.type)) {\n        this.element.addEventListener('click', () => {\n          closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled?.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()} id={this.identifier}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-c-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-card.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgCard extends Components.MgCard, HTMLElement {}
 export const MgCard: {
-  prototype: MgCard;
-  new (): MgCard;
+    prototype: MgCard;
+    new (): MgCard;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/mg-card2.js

@@ -13,90 +13,90 @@ const variantStyles = ['bar-left', 'fill'];
 const mgCardCss = ".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::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}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}";
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /*************
+         * Private *
+         *************/
+        this.name = 'mg-card';
+        this.classBase = 'mg-c-card';
+        /**
+         * Methode to set default varianStyle props
+         * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+         */
+        this.setDefaultVariantStyle = () => {
+            if (this.variantStyle === undefined)
+                this.variantStyle = 'bar-left';
+        };
+        this.variant = undefined;
+        this.variantStyle = undefined;
+        this.classCollection = new ClassList([this.classBase]);
+    }
+    validateVariant(newValue, oldValue) {
+        if (newValue && !variants.includes(newValue))
+            throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
+        if (newValue) {
+            this.setDefaultVariantStyle();
+            this.classCollection.add(`${this.classBase}--${newValue}`);
+        }
+        if (oldValue)
+            this.classCollection.delete(`${this.classBase}--${oldValue}`);
+    }
+    validateVariantStyle(newValue, oldValue) {
+        if (newValue && !variantStyles.includes(newValue))
+            throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
+        else if (Boolean(newValue) && !variants.includes(this.variant))
+            throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
+        if (newValue)
+            this.classCollection.add(`${this.classBase}--${newValue}`);
+        if (oldValue)
+            this.classCollection.delete(`${this.classBase}--${oldValue}`);
+    }
     /*************
-     * Private *
+     * Lifecycle *
      *************/
-    this.name = 'mg-card';
-    this.classBase = 'mg-c-card';
     /**
-     * Methode to set default varianStyle props
-     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * Check if props are well configured on init
      */
-    this.setDefaultVariantStyle = () => {
-      if (this.variantStyle === undefined)
-        this.variantStyle = 'bar-left';
-    };
-    this.variant = undefined;
-    this.variantStyle = undefined;
-    this.classCollection = new ClassList([this.classBase]);
-  }
-  validateVariant(newValue, oldValue) {
-    if (newValue && !variants.includes(newValue))
-      throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
-    if (newValue) {
-      this.setDefaultVariantStyle();
-      this.classCollection.add(`${this.classBase}--${newValue}`);
+    componentWillLoad() {
+        this.validateVariant(this.variant);
+        this.validateVariantStyle(this.variantStyle);
     }
-    if (oldValue)
-      this.classCollection.delete(`${this.classBase}--${oldValue}`);
-  }
-  validateVariantStyle(newValue, oldValue) {
-    if (newValue && !variantStyles.includes(newValue))
-      throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
-    else if (Boolean(newValue) && !variants.includes(this.variant))
-      throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
-    if (newValue)
-      this.classCollection.add(`${this.classBase}--${newValue}`);
-    if (oldValue)
-      this.classCollection.delete(`${this.classBase}--${oldValue}`);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateVariant(this.variant);
-    this.validateVariantStyle(this.variantStyle);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    var _a;
-    return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", null)));
-  }
-  static get watchers() { return {
-    "variant": ["validateVariant"],
-    "variantStyle": ["validateVariantStyle"]
-  }; }
-  static get style() { return mgCardCss; }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        var _a;
+        return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", null)));
+    }
+    static get watchers() { return {
+        "variant": ["validateVariant"],
+        "variantStyle": ["validateVariantStyle"]
+    }; }
+    static get style() { return mgCardCss; }
 }, [1, "mg-card", {
-    "variant": [1],
-    "variantStyle": [1025, "variant-style"],
-    "classCollection": [32]
-  }, undefined, {
-    "variant": ["validateVariant"],
-    "variantStyle": ["validateVariantStyle"]
-  }]);
+        "variant": [1],
+        "variantStyle": [1025, "variant-style"],
+        "classCollection": [32]
+    }, undefined, {
+        "variant": ["validateVariant"],
+        "variantStyle": ["validateVariantStyle"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-card"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-card":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgCard);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgCard);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/mg-card2.js.map

@@ -1 +1 @@
-{"file":"mg-card2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;;AAGO,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU;;ACb1D,MAAM,SAAS,GAAG,ylFAAylF;;MCS9lF,MAAM;;;;;;;;IAKA,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,WAAW,CAAC;;;;;IA0CjC,2BAAsB,GAAG;MAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;KACrE,CAAC;;;2BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;EAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;IAC5H,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GAC7E;EAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;SACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACxH,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IACzE,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GAC7E;;;;;;;EAsBD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC9C;;;;;EAMD,MAAM;;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,gBAAgB,GAAQ,EAC9E,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-card/mg-card.conf.ts","../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = (typeof variantStyles)[number];\n",".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::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}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}/*# sourceMappingURL=mg-card.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n@Component({\n  tag: 'mg-card',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Private *\n   *************/\n\n  private readonly name = 'mg-card';\n  private readonly classBase = 'mg-c-card';\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define variant prop\n   */\n  @Prop() variant: undefined | VariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n    if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n    if (newValue) {\n      this.setDefaultVariantStyle();\n      this.classCollection.add(`${this.classBase}--${newValue}`);\n    }\n    if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n  }\n\n  /**\n   * Define variantStyle prop\n   */\n  @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n    if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n    else if (Boolean(newValue) && !variants.includes(this.variant))\n      throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n    if (newValue) this.classCollection.add(`${this.classBase}--${newValue}`);\n    if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList([this.classBase]);\n\n  /**\n   * Methode to set default varianStyle props\n   * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n   */\n  private setDefaultVariantStyle = (): void => {\n    if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        {this.variantStyle?.startsWith('bar-') && <span class=\"mg-c-card__bar\"></span>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-card2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;;AAGO,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU;;ACb1D,MAAM,SAAS,GAAG,ylFAAylF;;MCS9lF,MAAM;;;;;;;;QAKA,SAAI,GAAG,SAAS,CAAC;QACjB,cAAS,GAAG,WAAW,CAAC;;;;;QA0CjC,2BAAsB,GAAG;YAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;gBAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;SACrE,CAAC;;;+BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;IAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;QACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;QAC5H,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;SAC5D;QACD,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC7E;IAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;QACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;aACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;YAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;QACxH,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;QACzE,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC7E;;;;;;;IAsBD,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9C;;;;;IAMD,MAAM;;QACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,gBAAgB,GAAQ,EAC9E,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-card/mg-card.conf.ts","../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = (typeof variantStyles)[number];\n",".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::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}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}/*# sourceMappingURL=mg-card.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n@Component({\n  tag: 'mg-card',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Private *\n   *************/\n\n  private readonly name = 'mg-card';\n  private readonly classBase = 'mg-c-card';\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define variant prop\n   */\n  @Prop() variant: undefined | VariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n    if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n    if (newValue) {\n      this.setDefaultVariantStyle();\n      this.classCollection.add(`${this.classBase}--${newValue}`);\n    }\n    if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n  }\n\n  /**\n   * Define variantStyle prop\n   */\n  @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n    if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n    else if (Boolean(newValue) && !variants.includes(this.variant))\n      throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n    if (newValue) this.classCollection.add(`${this.classBase}--${newValue}`);\n    if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList([this.classBase]);\n\n  /**\n   * Methode to set default varianStyle props\n   * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n   */\n  private setDefaultVariantStyle = (): void => {\n    if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        {this.variantStyle?.startsWith('bar-') && <span class=\"mg-c-card__bar\"></span>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-character-left.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgCharacterLeft extends Components.MgCharacterLeft, HTMLElement {}
 export const MgCharacterLeft: {
-  prototype: MgCharacterLeft;
-  new (): MgCharacterLeft;
+    prototype: MgCharacterLeft;
+    new (): MgCharacterLeft;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/mg-character-left2.js

@@ -4,59 +4,59 @@ import { i as initLocales } from './index2.js';
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
 
 const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.identifier = undefined;
-    this.characters = '';
-    this.maxlength = undefined;
-  }
-  validateMaxlength(newValue) {
-    if (typeof newValue !== 'number') {
-      throw new Error('<mg-character-left> prop "maxlength" is required.');
+    constructor() {
+        super();
+        this.__registerHost();
+        this.identifier = undefined;
+        this.characters = '';
+        this.maxlength = undefined;
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateMaxlength(this.maxlength);
-    this.messages = initLocales(this.element).messages;
-  }
-  /**
-   * Render component
-   * @returns HTML Element
-   */
-  render() {
-    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "maxlength": ["validateMaxlength"]
-  }; }
-  static get style() { return mgCharacterLeftCss; }
+    validateMaxlength(newValue) {
+        if (typeof newValue !== 'number') {
+            throw new Error('<mg-character-left> prop "maxlength" is required.');
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateMaxlength(this.maxlength);
+        this.messages = initLocales(this.element).messages;
+    }
+    /**
+     * Render component
+     * @returns HTML Element
+     */
+    render() {
+        return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "maxlength": ["validateMaxlength"]
+    }; }
+    static get style() { return mgCharacterLeftCss; }
 }, [2, "mg-character-left", {
-    "identifier": [1],
-    "characters": [1],
-    "maxlength": [2]
-  }, undefined, {
-    "maxlength": ["validateMaxlength"]
-  }]);
+        "identifier": [1],
+        "characters": [1],
+        "maxlength": [2]
+    }, undefined, {
+        "maxlength": ["validateMaxlength"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-character-left"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-character-left":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgCharacterLeft);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-character-left"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-character-left":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgCharacterLeft);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/mg-character-left2.js.map

@@ -1 +1 @@
-{"file":"mg-character-left2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uDAAuD;;MCQrE,eAAe;;;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;GACF;;;;;;;EASD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,2BAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/mg-character-left/mg-character-left.tsx"],"sourcesContent":["mg-character-left{display:block}/*# sourceMappingURL=mg-character-left.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n  scoped: true,\n})\nexport class MgCharacterLeft {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgCharacterLeftElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string;\n\n  /**\n   * Sets the characters to count\n   */\n  @Prop() characters = '';\n\n  /**\n   * Add maximum length\n   */\n  @Prop() maxlength!: number;\n  @Watch('maxlength')\n  validateMaxlength(newValue: number): void {\n    if (typeof newValue !== 'number') {\n      throw new Error('<mg-character-left> prop \"maxlength\" is required.');\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateMaxlength(this.maxlength);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render component\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span id={this.identifier} aria-live=\"polite\">\n        <span aria-hidden=\"true\">\n          {this.maxlength - this.characters.length}/{this.maxlength}\n        </span>\n        <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-character-left2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uDAAuD;;MCQrE,eAAe;;;;;0BAyBL,EAAE;;;IAOvB,iBAAiB,CAAC,QAAgB;QAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;SACtE;KACF;;;;;;;IASD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;;IAMD,MAAM;QACJ,QACE,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,2BAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/mg-character-left/mg-character-left.tsx"],"sourcesContent":["mg-character-left{display:block}/*# sourceMappingURL=mg-character-left.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n  scoped: true,\n})\nexport class MgCharacterLeft {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgCharacterLeftElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string;\n\n  /**\n   * Sets the characters to count\n   */\n  @Prop() characters = '';\n\n  /**\n   * Add maximum length\n   */\n  @Prop() maxlength!: number;\n  @Watch('maxlength')\n  validateMaxlength(newValue: number): void {\n    if (typeof newValue !== 'number') {\n      throw new Error('<mg-character-left> prop \"maxlength\" is required.');\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateMaxlength(this.maxlength);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render component\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span id={this.identifier} aria-live=\"polite\">\n        <span aria-hidden=\"true\">\n          {this.maxlength - this.characters.length}/{this.maxlength}\n        </span>\n        <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-details.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgDetails extends Components.MgDetails, HTMLElement {}
 export const MgDetails: {
-  prototype: MgDetails;
-  new (): MgDetails;
+    prototype: MgDetails;
+    new (): MgDetails;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/mg-details.js

@@ -5,80 +5,80 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
 const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--font-size)*var(--line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:1.5rem;gap:.6rem}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.expandedChange = createEvent(this, "expanded-change", 7);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Handle details toggle
+         */
+        this.handleToggle = () => {
+            this.expanded = this.details.open;
+        };
+        this.toggleClosed = undefined;
+        this.toggleOpened = undefined;
+        this.hideSummary = false;
+        this.expanded = false;
+    }
+    validateTitles(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
+        }
+    }
+    handleExpanded(newValue) {
+        this.expandedChange.emit(newValue);
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Handle details toggle
+     * Check if component props are well configured on init
      */
-    this.handleToggle = () => {
-      this.expanded = this.details.open;
-    };
-    this.toggleClosed = undefined;
-    this.toggleOpened = undefined;
-    this.hideSummary = false;
-    this.expanded = false;
-  }
-  validateTitles(newValue) {
-    if (!isValidString(newValue)) {
-      throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
+    componentWillLoad() {
+        this.validateTitles(this.toggleClosed);
+        this.validateTitles(this.toggleOpened);
     }
-  }
-  handleExpanded(newValue) {
-    this.expandedChange.emit(newValue);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateTitles(this.toggleClosed);
-    this.validateTitles(this.toggleOpened);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("details", { class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-c-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-c-details__details" }, h("slot", { name: "details" }))));
-  }
-  static get watchers() { return {
-    "toggleClosed": ["validateTitles"],
-    "toggleOpened": ["validateTitles"],
-    "expanded": ["handleExpanded"]
-  }; }
-  static get style() { return mgDetailsCss; }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("details", { class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-c-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-c-details__details" }, h("slot", { name: "details" }))));
+    }
+    static get watchers() { return {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }; }
+    static get style() { return mgDetailsCss; }
 }, [1, "mg-details", {
-    "toggleClosed": [1, "toggle-closed"],
-    "toggleOpened": [1, "toggle-opened"],
-    "hideSummary": [4, "hide-summary"],
-    "expanded": [1028]
-  }, undefined, {
-    "toggleClosed": ["validateTitles"],
-    "toggleOpened": ["validateTitles"],
-    "expanded": ["handleExpanded"]
-  }]);
+        "toggleClosed": [1, "toggle-closed"],
+        "toggleOpened": [1, "toggle-opened"],
+        "hideSummary": [4, "hide-summary"],
+        "expanded": [1028]
+    }, undefined, {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-details", "mg-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-details":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgDetails$1);
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-details", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgDetails$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();