@mgdis/mg-components 6.12.0 → 6.13.1

package/dist/components/mg-input-textarea.js.map

@@ -1 +1 @@
-{"file":"mg-input-textarea.js","mappings":"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","names":["MgInputTextarea","__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-input-textarea.css?tag=mg-input-textarea&encapsulation=shadow","src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"sourcesContent":[".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left: 0;--mg-c-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right: 0;--mg-c-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right: var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right: var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--display-character-left mg-character-left{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.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-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__readonly-value{white-space:pre-line}.mg-c-input__with-character-left{flex-grow:1}.mg-c-input__with-character-left mg-character-left{display:block;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}/*# sourceMappingURL=mg-input-textarea.css.map */\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { ClassList, isValidString, toString } from '@mgdis/core-ui-helpers/dist/utils';\nimport { type TooltipPosition, type Width, type EventType, widths, classReadonly, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-input-textarea',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n  shadow: true,\n})\nexport class MgInputTextarea {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classFocus = 'mg-u-is-focused';\n  private readonly classDisplayCharacterLeft = 'mg-c-input--display-character-left';\n\n  // IDs\n  private characterLeftId;\n\n  // HTML selector\n  private input: HTMLTextAreaElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n  private handlerInProgress: EventType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputTextareaElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  handleValue(newValue: string): void {\n    this.checkValidity();\n    this.valueChange.emit(newValue);\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   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Input max length\n   */\n  @Prop() maxlength = 4000;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputTextarea['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  @Watch('disabled')\n  validateDisabled(newValue: MgInputTextarea['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n  @Watch('mgWidth')\n  watchMgWidth(newValue: MgInputTextarea['mgWidth']): void {\n    // reset width class\n    widths.forEach(width => {\n      this.classCollection.delete(`mg-c-input--width-${width}`);\n    });\n\n    // apply new width\n    if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n  }\n\n  /**\n   * Define input pattern to validate\n   * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop() patternErrorMessage?: string;\n  @Watch('pattern')\n  @Watch('patternErrorMessage')\n  validatePattern(newValue: string): void {\n    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n      throw new Error(\n        `<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired. Passed value: \"pattern='${toString(this.pattern)}'\" and \"patternErrorMessage='${toString(this.patternErrorMessage)}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Define the number of visible text lines for the control\n   */\n  @Prop() rows = 3;\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() characterLeftHide = false;\n  @Watch('characterLeftHide')\n  validatecharacterLeftHide(newValue: boolean): void {\n    if (newValue) {\n      this.classCollection.delete(this.classDisplayCharacterLeft);\n    } else {\n      this.classCollection.add(this.classDisplayCharacterLeft);\n    }\n  }\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Define if input is resizable\n   */\n  @Prop() resizable: 'none' | 'both' | 'horizontal' | 'vertical' = 'none';\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextareaElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextareaElement['valid']>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  displayError(): Promise<void> {\n    // Use `Promise` as requested for stencil method\n    // Use `requestAnimationFrame` to ensure:\n    // - DOM is fully updated before validation\n    // - Async operations are completed\n    // - No timing issues with Stencil's render cycle\n    // - Keep everything in sync both inside and outside the component\n    return new Promise(resolve => {\n      requestAnimationFrame(() => {\n        this.checkValidity();\n        this.setErrorMessage();\n        this.hasDisplayedError = this.invalid;\n        resolve();\n      });\n    });\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Reset value, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = '';\n      this.checkValidity();\n      this.errorMessage = undefined;\n      this.hasDisplayedError = false;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputTextarea['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n  }\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    if (this.hasDisplayedError) {\n      this.checkValidity();\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle focus event\n   */\n  private handleFocus = (): void => {\n    this.classCollection.add(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Manage focus\n    this.classCollection.delete(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n    // Display Error\n    this.handlerInProgress = 'blur';\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n    });\n  };\n\n  /**\n   * Get pattern validity\n   * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n   * @returns is pattern valid\n   */\n  private getPatternValidity = (): boolean => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && this.getPatternValidity()));\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does not match pattern\n    if (!this.valid) {\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (!this.getPatternValidity()) {\n        this.errorMessage = this.patternErrorMessage;\n      }\n      // required\n      else if (this.input.validity.valueMissing) {\n        this.errorMessage = this.messages.errors.required;\n      }\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    this.characterLeftId = `${this.identifier}-character-left`;\n    // Validate\n    this.validatecharacterLeftHide(this.characterLeftHide);\n    this.validatePattern(this.pattern);\n    this.validatePattern(this.patternErrorMessage);\n    this.watchMgWidth(this.mgWidth);\n    this.watchReadonly(this.readonly);\n    this.validateDisabled(this.disabled);\n\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        tooltip={this.tooltip}\n        tooltipPosition={this.readonly && this.value === undefined ? 'label' : this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          this.value && <b class=\"mg-c-input__readonly-value\">{this.value}</b>\n        ) : (\n          <div class=\"mg-c-input__with-character-left\">\n            <textarea\n              class={{\n                'mg-c-input__box': true,\n                'mg-c-input__box--width': true,\n                'mg-c-input__box--resizable': this.resizable === 'both',\n                'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n                'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n              }}\n              value={this.value}\n              id={this.identifier}\n              name={this.name}\n              placeholder={this.placeholder}\n              title={this.placeholder}\n              rows={this.rows}\n              maxlength={this.maxlength}\n              disabled={this.disabled}\n              required={this.required}\n              aria-invalid={(this.invalid === true).toString()}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={(el: HTMLTextAreaElement) => {\n                if (el !== null) this.input = el;\n              }}\n            ></textarea>\n            {!this.characterLeftHide && this.maxlength > 0 && (\n              <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n            )}\n          </div>\n        )}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-textarea.js","mappings":"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","names":["MgInputTextarea","__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-input-textarea.css?tag=mg-input-textarea&encapsulation=shadow","src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"sourcesContent":[".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left: 0;--mg-c-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right: 0;--mg-c-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right: var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right: var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--display-character-left mg-character-left{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__readonly-value{white-space:pre-line}.mg-c-input__with-character-left{flex-grow:1}.mg-c-input__with-character-left mg-character-left{display:block;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}/*# sourceMappingURL=mg-input-textarea.css.map */\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { ClassList, isValidString, toString } from '@mgdis/core-ui-helpers/dist/utils';\nimport { type TooltipPosition, type Width, type EventType, widths, classReadonly, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-input-textarea',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n  shadow: true,\n})\nexport class MgInputTextarea {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classFocus = 'mg-u-is-focused';\n  private readonly classDisplayCharacterLeft = 'mg-c-input--display-character-left';\n\n  // IDs\n  private characterLeftId;\n\n  // HTML selector\n  private input: HTMLTextAreaElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n  private handlerInProgress: EventType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputTextareaElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  handleValue(newValue: string): void {\n    this.checkValidity();\n    this.valueChange.emit(newValue);\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   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Input max length\n   */\n  @Prop() maxlength = 4000;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputTextarea['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  @Watch('disabled')\n  validateDisabled(newValue: MgInputTextarea['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n  @Watch('mgWidth')\n  watchMgWidth(newValue: MgInputTextarea['mgWidth']): void {\n    // reset width class\n    widths.forEach(width => {\n      this.classCollection.delete(`mg-c-input--width-${width}`);\n    });\n\n    // apply new width\n    if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n  }\n\n  /**\n   * Define input pattern to validate\n   * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop() patternErrorMessage?: string;\n  @Watch('pattern')\n  @Watch('patternErrorMessage')\n  validatePattern(newValue: string): void {\n    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n      throw new Error(\n        `<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired. Passed value: \"pattern='${toString(this.pattern)}'\" and \"patternErrorMessage='${toString(this.patternErrorMessage)}'\".`,\n      );\n    }\n  }\n\n  /**\n   * Define the number of visible text lines for the control\n   */\n  @Prop() rows = 3;\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() characterLeftHide = false;\n  @Watch('characterLeftHide')\n  validatecharacterLeftHide(newValue: boolean): void {\n    if (newValue) {\n      this.classCollection.delete(this.classDisplayCharacterLeft);\n    } else {\n      this.classCollection.add(this.classDisplayCharacterLeft);\n    }\n  }\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Define if input is resizable\n   */\n  @Prop() resizable: 'none' | 'both' | 'horizontal' | 'vertical' = 'none';\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextareaElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextareaElement['valid']>;\n\n  /**\n   * Set focus on input.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.input?.focus();\n  }\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  displayError(): Promise<void> {\n    // Use `Promise` as requested for stencil method\n    // Use `requestAnimationFrame` to ensure:\n    // - DOM is fully updated before validation\n    // - Async operations are completed\n    // - No timing issues with Stencil's render cycle\n    // - Keep everything in sync both inside and outside the component\n    return new Promise(resolve => {\n      requestAnimationFrame(() => {\n        this.checkValidity();\n        this.setErrorMessage();\n        this.hasDisplayedError = this.invalid;\n        resolve();\n      });\n    });\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Reset value, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = '';\n      // Use `Promise` as requested for stencil method\n      // Use `requestAnimationFrame` to ensure:\n      // - DOM is fully updated before validation\n      // - Async operations are completed\n      // - No timing issues with Stencil's render cycle\n      // - Keep everything in sync both inside and outside the component\n      return new Promise(resolve => {\n        requestAnimationFrame(() => {\n          this.checkValidity();\n          this.errorMessage = undefined;\n          this.hasDisplayedError = false;\n          resolve();\n        });\n      });\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputTextarea['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n  }\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    if (this.hasDisplayedError) {\n      this.checkValidity();\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle focus event\n   */\n  private handleFocus = (): void => {\n    this.classCollection.add(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Manage focus\n    this.classCollection.delete(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n    // Display Error\n    this.handlerInProgress = 'blur';\n    this.displayError().finally(() => {\n      // reset guard\n      this.handlerInProgress = undefined;\n    });\n  };\n\n  /**\n   * Get pattern validity\n   * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n   * @returns is pattern valid\n   */\n  private getPatternValidity = (): boolean => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && this.getPatternValidity()));\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does not match pattern\n    if (!this.valid) {\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (!this.getPatternValidity()) {\n        this.errorMessage = this.patternErrorMessage;\n      }\n      // required\n      else if (this.input.validity.valueMissing) {\n        this.errorMessage = this.messages.errors.required;\n      }\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    this.characterLeftId = `${this.identifier}-character-left`;\n    // Validate\n    this.validatecharacterLeftHide(this.characterLeftHide);\n    this.validatePattern(this.pattern);\n    this.validatePattern(this.patternErrorMessage);\n    this.watchMgWidth(this.mgWidth);\n    this.watchReadonly(this.readonly);\n    this.validateDisabled(this.disabled);\n\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        tooltip={this.tooltip}\n        tooltipPosition={this.readonly && this.value === undefined ? 'label' : this.tooltipPosition}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          this.value && <b class=\"mg-c-input__readonly-value\">{this.value}</b>\n        ) : (\n          <div class=\"mg-c-input__with-character-left\">\n            <textarea\n              class={{\n                'mg-c-input__box': true,\n                'mg-c-input__box--width': true,\n                'mg-c-input__box--resizable': this.resizable === 'both',\n                'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n                'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n              }}\n              value={this.value}\n              id={this.identifier}\n              name={this.name}\n              placeholder={this.placeholder}\n              title={this.placeholder}\n              rows={this.rows}\n              maxlength={this.maxlength}\n              disabled={this.disabled}\n              required={this.required}\n              aria-invalid={(this.invalid === true).toString()}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={(el: HTMLTextAreaElement) => {\n                if (el !== null) this.input = el;\n              }}\n            ></textarea>\n            {!this.characterLeftHide && this.maxlength > 0 && (\n              <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n            )}\n          </div>\n        )}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-input-toggle.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
-const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.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-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
+const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
 
 /**
  * type Option validation function
@@ -21,9 +21,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         this.inputValid = createEvent(this, "input-valid", 7);
-        /************
-         * Internal *
-         ************/
         // Classes
         this.classIsActive = 'mg-c-input--toggle-is-active';
         this.classOnOff = 'mg-c-input--toggle-on-off';
@@ -172,6 +169,13 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         // update value
         this.value = this.getCheckedItem(newValue).value;
     }
+    /**
+     * Set focus on input.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     /**
      * Set an error and display a custom error message.
      * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
@@ -199,9 +203,19 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
     async reset() {
         if (!this.readonly) {
             this.value = this.options[0].value;
-            this.errorMessage = undefined;
-            this.valid = undefined;
             this.setChecked();
+            // Use `Promise` as requested for stencil method
+            // Use `requestAnimationFrame` to ensure:
+            // - DOM is fully updated before validation
+            // - Async operations are completed
+            // - No timing issues with Stencil's render cycle
+            // - Keep everything in sync both inside and outside the component
+            return new Promise(resolve => {
+                requestAnimationFrame(() => {
+                    this.errorMessage = undefined;
+                    resolve();
+                });
+            });
         }
     }
     /**
@@ -251,7 +265,10 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: 'cad9cfb403949c1a2092657d2d05956dc7bfe701', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
+        return (h("mg-input", { key: '2e92c411cfa6fdcbcc6ed0546eed6e804ed4d9cb', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
+                if (el !== null)
+                    this.button = el;
+            } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -284,6 +301,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "errorMessage": [32],
         "valid": [32],
         "checked": [32],
+        "setFocus": [64],
         "setError": [64],
         "reset": [64]
     }, undefined, {

package/dist/components/mg-input-toggle.js.map

@@ -1 +1 @@
-{"file":"mg-input-toggle.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,wwGAAwwG;;ACKjyG;;;;AAIG;AACH,MAAM,QAAQ,GAAG,CAAC,MAAe,KAC/B,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAQ,MAAsB,CAAC,KAAK,KAAK,QAAQ,IAAK,MAAsB,CAAC,KAAK,KAAK,SAAS;MAWnHA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;;;AAME;;AAEc;;AAGG,QAAA,IAAa,CAAA,aAAA,GAAG,8BAA8B;AAC9C,QAAA,IAAU,CAAA,UAAA,GAAG,2BAA2B;AACxC,QAAA,IAAS,CAAA,SAAA,GAAG,yBAAyB;AAkDtD;;;AAGG;AACK,QAAA,IAAA,CAAA,IAAI,GAAW,IAAI,CAAC,UAAU;AAOtC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAE1B;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAEzB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAOtB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAOxB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAYxB;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAoB,OAAO;AAOlD;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAI,SAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;AAiB3E;;AAEG;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AA0CxB;;;AAGG;AACK,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,YAAqB,KAAU;;AAExD,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;;YAE7B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,KAAK,SAAS,EAAE;AAC7C,gBAAA,IAAI,CAAC,YAAY,GAAG,YAAY;;AAEpC,SAAC;AAeD;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAG,MAAW;AACjC,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC9B,SAAC;AAED;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAG,MAAW;AACjC,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;AAC/C,YAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACtB,gBAAA,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC;;AACrD,iBAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;;;AAGvB,gBAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;;AAEvE,SAAC;AAED;;;;AAIG;AACK,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,OAAiC,KAAiB;;AAC1E,YAAA,IAAI,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,MAAK,CAAC,EAAE;AAC9B,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;;iBAC/B;AACL,gBAAA,OAAO,IAAI;;AAEf,SAAC;AA0FF;;AAlUC,IAAA,WAAW,CAAC,QAAa,EAAA;;QAEvB,IAAI,CAAC,UAAU,EAAE;;AAEjB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAQjC,IAAA,aAAa,CAAC,QAAgC,EAAA;AAC5C,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAC3D,MAAM,IAAI,KAAK,CAAC,CAAiE,8DAAA,EAAA,QAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAGpG,aAAA,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;;;AAGhE,aAAA,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;AAC5D,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;;aAClB;YACL,MAAM,IAAI,KAAK,CAAC,CAA8G,2GAAA,EAAA,QAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAmCxJ,IAAA,YAAY,CAAC,QAAkC,EAAA;AAC7C,QAAA,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;;YAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;AAQnD,IAAA,WAAW,CAAC,QAAiC,EAAA;AAC3C,QAAA,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;AAQlD,IAAA,aAAa,CAAC,QAAmC,EAAA;AAC/C,QAAA,IAAI,QAAQ;AAAE,YAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC;;AAChD,YAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC;;AAQjD,IAAA,aAAa,CAAC,QAAmC,EAAA;AAC/C,QAAA,IAAI,QAAQ;AAAE,YAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,CAAC;;AAChD,YAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,CAAC;;AA2CjD,IAAA,aAAa,CAAC,QAAkC,EAAA;;AAE9C,QAAA,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;QAGpD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,KAAK;;AAalD;;;;;;;AAOG;AAEH,IAAA,MAAM,QAAQ,CAAC,KAAc,EAAE,YAAoB,EAAA;AACjD,QAAA,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;AAC9B,YAAA,MAAM,IAAI,KAAK,CAAC,wEAAwE,CAAC;;AACpF,aAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE;AACvC,YAAA,MAAM,IAAI,KAAK,CAAC,8EAA8E,CAAC;;aAC1F;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;AAC3B,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,SAAS,GAAG,YAAY,CAAC;;;AAiB1D;;AAEG;AAEH,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;AAClC,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;YACtB,IAAI,CAAC,UAAU,EAAE;;;AAqCrB;;AAEG;IACK,UAAU,GAAA;QAChB,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC;QAExG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;AAKzC,YAAA,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAe,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;AAC1G,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;;;;AAKnB,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,KAAK;AAC7E,YAAA,IAAI,CAAC,OAAO,GAAG,oBAAoB,KAAK,CAAC,GAAG,CAAC,aAAa,GAAG,aAAa;;aACrE;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;;;AAIvD;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;;AAEf,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;QAE9B,IAAI,CAAC,aAAa,EAAE;;QAEpB,IAAI,CAAC,UAAU,EAAE;;AAEjB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;AAC7B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAGnC;;;AAGG;IACH,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;QACrD,QACE,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAClC,kBAAkB,EAAE,EAAE,EACtB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,YAAY,EAAE,IAAI,CAAC,YAAY,IAE9B,IAAI,CAAC,QAAQ,IACZ,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,4BAA4B,EAAA,EAAE,WAAW,CAAC,KAAK,CAAK,KAE5E,CACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAA,eAAA,EACtB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAC7C,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAC,2BAA2B,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,EAE3B,CAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,EAAA,EAChE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACtB,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,EAAA,EAChE,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACtB,CACA,CACV,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgInputToggle","__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.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-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","import { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/core-ui-helpers/dist/utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: unknown): option is ToggleValue =>\n  typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/**\n * @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n */\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classIsActive = 'mg-c-input--toggle-is-active';\n  private readonly classOnOff = 'mg-c-input--toggle-on-off';\n  private readonly classIcon = 'mg-c-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: MgInputToggle['items']): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error(`<mg-input-toggle> prop \"items\" require 2 items. Passed value: ${toString(newValue)}.`);\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (Array.isArray(newValue) && newValue.every(isOption)) {\n      this.options = newValue;\n    } else {\n      throw new Error(`<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue. Passed value: ${toString(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   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputToggle['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputToggle['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Define input valid state\n   */\n  @State() valid: boolean;\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: MgInputToggle['checked']): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.getCheckedItem(newValue).value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: boolean, errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.valid = valid;\n      this.inputValid.emit(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n    }\n  }\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n  };\n\n  /**\n   * Reset value, validity, error and visual state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.options[0].value;\n      this.errorMessage = undefined;\n      this.valid = undefined;\n      this.setChecked();\n    }\n  }\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * Get checked item\n   * @param checked - checked item\n   * @returns toggle value\n   */\n  private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n    if (this.options?.length === 2) {\n      return this.options[checked ? 1 : 0];\n    } else {\n      return null;\n    }\n  };\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.watchIsIcon(this.isIcon);\n    this.watchIsOnOff(this.isOnOff);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const checkedItem = this.getCheckedItem(this.checked);\n    return (\n      <mg-input\n        label={this.label}\n        helpText={this.helpText}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\n        ) : (\n          <button\n            type=\"button\"\n            role=\"switch\"\n            aria-checked={this.checked.toString()}\n            aria-readonly={this.disabled || this.readonly}\n            id={this.identifier}\n            class=\"mg-c-input__button-toggle\"\n            disabled={this.disabled || this.readonly}\n            onClick={this.toggleChecked}\n          >\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-1\"></slot>\n            </span>\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-2\"></slot>\n            </span>\n          </button>\n        )}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle","__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","import { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/core-ui-helpers/dist/utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: unknown): option is ToggleValue =>\n  typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/**\n * @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n */\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  private button: HTMLButtonElement;\n  // Classes\n  private readonly classIsActive = 'mg-c-input--toggle-is-active';\n  private readonly classOnOff = 'mg-c-input--toggle-on-off';\n  private readonly classIcon = 'mg-c-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n  @Watch('value')\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: MgInputToggle['items']): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error(`<mg-input-toggle> prop \"items\" require 2 items. Passed value: ${toString(newValue)}.`);\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (Array.isArray(newValue) && newValue.every(isOption)) {\n      this.options = newValue;\n    } else {\n      throw new Error(`<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue. Passed value: ${toString(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   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputToggle['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  watchDisabled(newValue: MgInputToggle['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Define input valid state\n   */\n  @State() valid: boolean;\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: MgInputToggle['checked']): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.getCheckedItem(newValue).value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Set focus on input.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.button?.focus();\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: boolean, errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.valid = valid;\n      this.inputValid.emit(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n    }\n  }\n\n  /**\n   * Reset value, validity, error and visual state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.options[0].value;\n      this.setChecked();\n      // Use `Promise` as requested for stencil method\n      // Use `requestAnimationFrame` to ensure:\n      // - DOM is fully updated before validation\n      // - Async operations are completed\n      // - No timing issues with Stencil's render cycle\n      // - Keep everything in sync both inside and outside the component\n      return new Promise(resolve => {\n        requestAnimationFrame(() => {\n          this.errorMessage = undefined;\n          resolve();\n        });\n      });\n    }\n  }\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n  };\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * Get checked item\n   * @param checked - checked item\n   * @returns toggle value\n   */\n  private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n    if (this.options?.length === 2) {\n      return this.options[checked ? 1 : 0];\n    } else {\n      return null;\n    }\n  };\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.watchIsIcon(this.isIcon);\n    this.watchIsOnOff(this.isOnOff);\n    this.watchReadonly(this.readonly);\n    this.watchDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const checkedItem = this.getCheckedItem(this.checked);\n    return (\n      <mg-input\n        label={this.label}\n        helpText={this.helpText}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        tooltip={this.tooltip}\n        tooltipPosition={this.tooltipPosition}\n        errorMessage={this.errorMessage}\n      >\n        {this.readonly ? (\n          checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\n        ) : (\n          <button\n            type=\"button\"\n            role=\"switch\"\n            aria-checked={this.checked.toString()}\n            aria-readonly={this.disabled || this.readonly}\n            id={this.identifier}\n            class=\"mg-c-input__button-toggle\"\n            disabled={this.disabled || this.readonly}\n            onClick={this.toggleChecked}\n            ref={el => {\n              if (el !== null) this.button = el;\n            }}\n          >\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-1\"></slot>\n            </span>\n            <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n              <slot name=\"item-2\"></slot>\n            </span>\n          </button>\n        )}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-popover-content2.js

@@ -5,7 +5,7 @@ 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';
 
-const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-8) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}";
+const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}";
 
 const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent extends HTMLElement {
     constructor() {

package/dist/components/mg-popover-content2.js.map

@@ -1 +1 @@
-{"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,87JAA87J;;MCY78J,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;;AAsBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;AAO7E;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAW;AACrC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,SAAC;AAgDF;AA9CC;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ;;AAGpD;;AAEG;IACH,gBAAgB,GAAA;AACd,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QAExD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC;QACxE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;AACvE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8CAAA,EAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAI/F;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAA,EACxC,IAAI,CAAC,WAAW,KACf,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EACnG,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAA,CAAW,CACtB,CACb,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACpB,EACV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAQ,CAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-popover-content.css?tag=mg-popover-content&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"sourcesContent":[":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width: var(--mg-c-popover-max-width);--mg-c-card-min-width: var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-8) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}/*# sourceMappingURL=mg-popover-content.css.map */\n","import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/core-ui-helpers/dist/utils';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,+7JAA+7J;;MCY98J,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;;AAsBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;AAO7E;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAW;AACrC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,SAAC;AAgDF;AA9CC;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ;;AAGpD;;AAEG;IACH,gBAAgB,GAAA;AACd,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QAExD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC;QACxE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;AACvE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8CAAA,EAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAI/F;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAA,EACxC,IAAI,CAAC,WAAW,KACf,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EACnG,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAA,CAAW,CACtB,CACb,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACpB,EACV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAQ,CAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-popover-content.css?tag=mg-popover-content&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"sourcesContent":[":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width: var(--mg-c-popover-max-width);--mg-c-card-min-width: var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}/*# sourceMappingURL=mg-popover-content.css.map */\n","import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/core-ui-helpers/dist/utils';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-table.js

@@ -16,7 +16,7 @@ const textAlignments = ['left', 'center', 'right'];
 // Define possible data types
 const dataTypes = ['string', 'numeric', 'date'];
 
-const mgTableCss = ".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}}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td .mg-c-table__sort-button mg-icon,.mg-c-table thead th .mg-c-table__sort-button mg-icon{margin-left:var(--mg-b-size-4)}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}";
+const mgTableCss = ".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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}";
 
 /**
  * Check if value is a valid align object

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

@@ -1 +1 @@
-{"file":"mg-table.js","mappings":"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","names":["MgTable","__stencil_proxyCustomElement"],"sources":["src/components/molecules/mg-table/mg-table.conf.ts","../styles/dist/components/mg-table.css?tag=mg-table&encapsulation=shadow","src/components/molecules/mg-table/mg-table.tsx"],"sourcesContent":["import type { Size } from '../../../types';\n/**\n * Sizes\n */\n// Define possible sizes\nexport const sizes = ['small', 'medium', 'large', 'xlarge'] as const;\n// Define Table size type and ensure it is a valid size\nexport type TableSizeType = Size & (typeof sizes)[number];\n/**\n * Columns\n */\n// Define possible text alignments\nexport const textAlignments = ['left', 'center', 'right'] as const;\n// Define possible data types\nexport const dataTypes = ['string', 'numeric', 'date'] as const;\n// Define possible data types\nexport type datatypesType = (typeof dataTypes)[number];\n// Define columns type\nexport type ColumnsType = {\n  [key: number]: { align?: (typeof textAlignments)[number]; sortable?: boolean; datatype?: datatypesType };\n};\n",".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}}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing: var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-40);--mg-c-table-header-cell-height: calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing: var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-32);--mg-c-table-header-cell-height: var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height: var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing: var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-64);--mg-c-table-header-cell-height: var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td .mg-c-table__sort-button mg-icon,.mg-c-table thead th .mg-c-table__sort-button mg-icon{margin-left:var(--mg-b-size-4)}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}/*# sourceMappingURL=mg-table.css.map */\n","import { Component, Element, State, Prop, Watch } from '@stencil/core';\nimport { ClassList, toString, createID, isValidString } from '@mgdis/core-ui-helpers/dist/utils';\nimport { type TableSizeType, type ColumnsType, type datatypesType, textAlignments, dataTypes, sizes } from './mg-table.conf';\nimport { initLocales } from '../../../locales';\n\n/**\n * Check if value is a valid align object\n * @param newValue - New value\n * @returns True if value is a valid align object\n */\nconst isValidColumnsObject = (newValue: ColumnsType): boolean =>\n  // ensure newValue is an object\n  typeof newValue === 'object' &&\n  !Array.isArray(newValue) &&\n  // Ensure every property is well formatted\n  Object.entries(newValue).every(\n    ([key, value]) =>\n      // ensure key is a number\n      !isNaN(parseInt(key)) &&\n      // ensure value is an object\n      typeof value === 'object' &&\n      !Array.isArray(value) &&\n      // ensure value has at least one of the following properties\n      ((value.align !== undefined && textAlignments.includes(value.align)) ||\n        (value.sortable !== undefined && typeof value.sortable === 'boolean') ||\n        (value.datatype !== undefined && dataTypes.includes(value.datatype))) &&\n      // ensure no extra properties are present\n      Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)),\n  );\n\n/**\n * Compare values\n * @param firstValue - First value\n * @param secondValue - Second value\n * @param descending - Define descending order\n * @param datatype - Data type\n * @returns Comparison result\n * @example\n * compareValues('a', 'b', false, 'string'); // -1\n */\nconst compareValues = (firstValue: string, secondValue: string, descending: boolean, datatype: datatypesType): number => {\n  if (descending) {\n    const temp = firstValue;\n    firstValue = secondValue;\n    secondValue = temp;\n  }\n  if (datatype === 'date') {\n    return new Date(firstValue).getTime() - new Date(secondValue).getTime();\n  }\n  return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });\n};\n\n/**\n * @slot - Table content\n */\n@Component({\n  tag: 'mg-table',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-table.css',\n  shadow: true,\n})\nexport class MgTable {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  // Classes\n  private readonly componentClass = 'mg-c-table';\n  private readonly componentWrapperClass = 'mg-c-table-wrapper';\n  private readonly classFullWidth = 'mg-c-table--full-width';\n\n  // Alignment stylesheet\n  private alignmentStylesheet = new CSSStyleSheet();\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTableElement;\n\n  /**\n   * Define table size\n   */\n  @Prop() size: TableSizeType = 'medium';\n  @Watch('size')\n  watchSize(newValue: MgTable['size'], oldValue?: MgTable['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-table> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-table--size-${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-table--size-${newValue}`);\n    }\n  }\n\n  /**\n   * Define if table fits its parent element\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  watchFullWidth(newValue: MgTable['fullWidth']): void {\n    if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define column properties\n   */\n  @Prop() columns: ColumnsType;\n  @Watch('columns')\n  watchColumns(newValue: ColumnsType): void {\n    if (newValue !== undefined && !isValidColumnsObject(newValue)) {\n      throw new Error(`<mg-table> prop \"columns\" must be a ColumnsType object. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Class collection\n   */\n  @State() classCollection: ClassList = new ClassList([this.componentClass]);\n\n  /**\n   * Render Table\n   * @param table - Table element\n   */\n  private renderTable(table: HTMLTableElement): void {\n    let isSortable = false;\n    // Remove table classes\n    table.className = '';\n    // Add table classes\n    table.classList.add(...this.classCollection.classes);\n\n    // Set columns based on columns prop\n    if (this.columns !== undefined) {\n      // Store original rows\n      const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));\n\n      // Apply columns settings\n      Object.entries(this.columns).forEach(([key, value]) => {\n        // Add alignment to stylesheet\n        if (value.align !== undefined) {\n          this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);\n        }\n        // if align is not defined and datatype is number, align right\n        else if (value.datatype === 'numeric') {\n          this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);\n        }\n\n        // Define if column is sortable\n        if (value.sortable) {\n          isSortable = true;\n          // Add sortable class to table header\n          const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);\n\n          // Create button\n          const button = document.createElement('button');\n          button.classList.add('mg-c-table__sort-button');\n\n          // Append button to header\n          const sortableHeaderContent = sortableHeader.innerHTML;\n          sortableHeader.innerHTML = '';\n          button.innerHTML = sortableHeaderContent;\n\n          // Set icon\n          const icon = document.createElement('mg-icon');\n          icon.setAttribute('icon', 'arrows-up-down');\n\n          // Append icon to button\n          button.append(icon);\n          sortableHeader.append(button);\n\n          // Add event listener\n          button.addEventListener('click', (): void => {\n            // Reset aria pressed\n            table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {\n              ariaPressed.removeAttribute('aria-pressed');\n              ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');\n            });\n            // Reset aria sort\n            table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {\n              ariaSort.removeAttribute('aria-sort');\n            });\n\n            // Set aria pressed\n            button.setAttribute('aria-pressed', 'true');\n\n            // Manage sort order\n            // Get sort order\n            let sortOrder = sortableHeader.getAttribute('aria-sort');\n\n            // First click sort asc\n            if ([null, 'none'].includes(sortOrder)) {\n              sortableHeader.setAttribute('aria-sort', 'ascending');\n            }\n            // Second click sort desc\n            else if (sortOrder === 'ascending') {\n              sortableHeader.setAttribute('aria-sort', 'descending');\n            }\n            // Third click remove sort\n            else {\n              sortableHeader.setAttribute('aria-sort', 'none');\n            }\n\n            // Update sort order\n            sortOrder = sortableHeader.getAttribute('aria-sort');\n\n            // Update button icon\n            const icon = button.querySelector('mg-icon');\n            let iconType = 'arrows-up-down';\n            if (sortOrder === 'ascending') {\n              iconType = 'arrow-up';\n            } else if (sortOrder === 'descending') {\n              iconType = 'arrow-down';\n            }\n            icon.setAttribute('icon', iconType);\n\n            // If sort order is none, return to original order\n            if (sortOrder === 'none') {\n              // Append rows to table\n              rowsDefault.forEach(row => table.querySelector('tbody').append(row));\n              return;\n            }\n\n            // Set a copy of rows\n            const rows = Array.from(table.querySelectorAll('tbody tr'));\n\n            // Sort rows\n            rows.sort((a, b) => {\n              // Get cells\n              const cellA: HTMLTableCellElement = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n              const cellB: HTMLTableCellElement = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n\n              // Get cell values\n              const cellValueA = cellA.dataset.sort ?? cellA.textContent;\n              const cellValueB = cellB.dataset.sort ?? cellB.textContent;\n\n              // Sort cells based on sort order\n              return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);\n            });\n\n            // Append rows to table\n            rows.forEach(row => table.querySelector('tbody').append(row));\n          });\n        }\n      });\n    }\n\n    // Add alignment to columns\n    this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];\n\n    // Create div wrapper for responsive behavior\n    const divWrapper = document.createElement('div');\n    divWrapper.setAttribute('class', this.componentWrapperClass);\n    divWrapper.setAttribute('tabindex', '0');\n    divWrapper.setAttribute('role', 'region');\n\n    // Get table title\n    let captionTable = table.querySelector('caption');\n\n    // If table is sortable we must add a caption\n    if (captionTable === null && isSortable) {\n      captionTable = document.createElement('caption');\n      table.prepend(captionTable);\n    }\n\n    if (captionTable !== null) {\n      // Ensure caption is not visible (otherwhise the table does not have rounded corners)\n      captionTable.className = 'mg-u-visually-hidden';\n\n      // Link caption to div\n      if (!isValidString(captionTable.id)) {\n        captionTable.setAttribute('id', createID(`${this.componentClass}-caption`));\n      }\n      divWrapper.setAttribute('aria-labelledby', captionTable.id);\n\n      // Add sortable caption if neeeded\n      if (isSortable) {\n        captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();\n      }\n    }\n    divWrapper.append(table);\n\n    // Remove existing table from shadow root\n    const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);\n    if (existingTable !== null) {\n      existingTable.remove();\n    }\n    // Append table\n    this.element.shadowRoot.append(divWrapper);\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  componentWillLoad(): void {\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentDidLoad(): void {\n    this.watchSize(this.size);\n    this.watchFullWidth(this.fullWidth);\n    this.watchColumns(this.columns);\n    this.renderTable(this.element.querySelector('table'));\n  }\n\n  /**\n   * Update table\n   */\n  componentWillUpdate(): void {\n    this.renderTable(this.element.shadowRoot.querySelector('table'));\n  }\n}\n"],"version":3}
+{"file":"mg-table.js","mappings":"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","names":["MgTable","__stencil_proxyCustomElement"],"sources":["src/components/molecules/mg-table/mg-table.conf.ts","../styles/dist/components/mg-table.css?tag=mg-table&encapsulation=shadow","src/components/molecules/mg-table/mg-table.tsx"],"sourcesContent":["import type { Size } from '../../../types';\n/**\n * Sizes\n */\n// Define possible sizes\nexport const sizes = ['small', 'medium', 'large', 'xlarge'] as const;\n// Define Table size type and ensure it is a valid size\nexport type TableSizeType = Size & (typeof sizes)[number];\n/**\n * Columns\n */\n// Define possible text alignments\nexport const textAlignments = ['left', 'center', 'right'] as const;\n// Define possible data types\nexport const dataTypes = ['string', 'numeric', 'date'] as const;\n// Define possible data types\nexport type datatypesType = (typeof dataTypes)[number];\n// Define columns type\nexport type ColumnsType = {\n  [key: number]: { align?: (typeof textAlignments)[number]; sortable?: boolean; datatype?: datatypesType };\n};\n",".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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing: var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-40);--mg-c-table-header-cell-height: calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing: var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-32);--mg-c-table-header-cell-height: var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height: var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing: var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-64);--mg-c-table-header-cell-height: var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}/*# sourceMappingURL=mg-table.css.map */\n","import { Component, Element, State, Prop, Watch } from '@stencil/core';\nimport { ClassList, toString, createID, isValidString } from '@mgdis/core-ui-helpers/dist/utils';\nimport { type TableSizeType, type ColumnsType, type datatypesType, textAlignments, dataTypes, sizes } from './mg-table.conf';\nimport { initLocales } from '../../../locales';\n\n/**\n * Check if value is a valid align object\n * @param newValue - New value\n * @returns True if value is a valid align object\n */\nconst isValidColumnsObject = (newValue: ColumnsType): boolean =>\n  // ensure newValue is an object\n  typeof newValue === 'object' &&\n  !Array.isArray(newValue) &&\n  // Ensure every property is well formatted\n  Object.entries(newValue).every(\n    ([key, value]) =>\n      // ensure key is a number\n      !isNaN(parseInt(key)) &&\n      // ensure value is an object\n      typeof value === 'object' &&\n      !Array.isArray(value) &&\n      // ensure value has at least one of the following properties\n      ((value.align !== undefined && textAlignments.includes(value.align)) ||\n        (value.sortable !== undefined && typeof value.sortable === 'boolean') ||\n        (value.datatype !== undefined && dataTypes.includes(value.datatype))) &&\n      // ensure no extra properties are present\n      Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)),\n  );\n\n/**\n * Compare values\n * @param firstValue - First value\n * @param secondValue - Second value\n * @param descending - Define descending order\n * @param datatype - Data type\n * @returns Comparison result\n * @example\n * compareValues('a', 'b', false, 'string'); // -1\n */\nconst compareValues = (firstValue: string, secondValue: string, descending: boolean, datatype: datatypesType): number => {\n  if (descending) {\n    const temp = firstValue;\n    firstValue = secondValue;\n    secondValue = temp;\n  }\n  if (datatype === 'date') {\n    return new Date(firstValue).getTime() - new Date(secondValue).getTime();\n  }\n  return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });\n};\n\n/**\n * @slot - Table content\n */\n@Component({\n  tag: 'mg-table',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-table.css',\n  shadow: true,\n})\nexport class MgTable {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  // Classes\n  private readonly componentClass = 'mg-c-table';\n  private readonly componentWrapperClass = 'mg-c-table-wrapper';\n  private readonly classFullWidth = 'mg-c-table--full-width';\n\n  // Alignment stylesheet\n  private alignmentStylesheet = new CSSStyleSheet();\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTableElement;\n\n  /**\n   * Define table size\n   */\n  @Prop() size: TableSizeType = 'medium';\n  @Watch('size')\n  watchSize(newValue: MgTable['size'], oldValue?: MgTable['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-table> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-table--size-${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-table--size-${newValue}`);\n    }\n  }\n\n  /**\n   * Define if table fits its parent element\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  watchFullWidth(newValue: MgTable['fullWidth']): void {\n    if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define column properties\n   */\n  @Prop() columns: ColumnsType;\n  @Watch('columns')\n  watchColumns(newValue: ColumnsType): void {\n    if (newValue !== undefined && !isValidColumnsObject(newValue)) {\n      throw new Error(`<mg-table> prop \"columns\" must be a ColumnsType object. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Class collection\n   */\n  @State() classCollection: ClassList = new ClassList([this.componentClass]);\n\n  /**\n   * Render Table\n   * @param table - Table element\n   */\n  private renderTable(table: HTMLTableElement): void {\n    let isSortable = false;\n    // Remove table classes\n    table.className = '';\n    // Add table classes\n    table.classList.add(...this.classCollection.classes);\n\n    // Set columns based on columns prop\n    if (this.columns !== undefined) {\n      // Store original rows\n      const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));\n\n      // Apply columns settings\n      Object.entries(this.columns).forEach(([key, value]) => {\n        // Add alignment to stylesheet\n        if (value.align !== undefined) {\n          this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);\n        }\n        // if align is not defined and datatype is number, align right\n        else if (value.datatype === 'numeric') {\n          this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);\n        }\n\n        // Define if column is sortable\n        if (value.sortable) {\n          isSortable = true;\n          // Add sortable class to table header\n          const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);\n\n          // Create button\n          const button = document.createElement('button');\n          button.classList.add('mg-c-table__sort-button');\n\n          // Append button to header\n          const sortableHeaderContent = sortableHeader.innerHTML;\n          sortableHeader.innerHTML = '';\n          button.innerHTML = sortableHeaderContent;\n\n          // Set icon\n          const icon = document.createElement('mg-icon');\n          icon.setAttribute('icon', 'arrows-up-down');\n\n          // Append icon to button\n          button.append(icon);\n          sortableHeader.append(button);\n\n          // Add event listener\n          button.addEventListener('click', (): void => {\n            // Reset aria pressed\n            table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {\n              ariaPressed.removeAttribute('aria-pressed');\n              ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');\n            });\n            // Reset aria sort\n            table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {\n              ariaSort.removeAttribute('aria-sort');\n            });\n\n            // Set aria pressed\n            button.setAttribute('aria-pressed', 'true');\n\n            // Manage sort order\n            // Get sort order\n            let sortOrder = sortableHeader.getAttribute('aria-sort');\n\n            // First click sort asc\n            if ([null, 'none'].includes(sortOrder)) {\n              sortableHeader.setAttribute('aria-sort', 'ascending');\n            }\n            // Second click sort desc\n            else if (sortOrder === 'ascending') {\n              sortableHeader.setAttribute('aria-sort', 'descending');\n            }\n            // Third click remove sort\n            else {\n              sortableHeader.setAttribute('aria-sort', 'none');\n            }\n\n            // Update sort order\n            sortOrder = sortableHeader.getAttribute('aria-sort');\n\n            // Update button icon\n            const icon = button.querySelector('mg-icon');\n            let iconType = 'arrows-up-down';\n            if (sortOrder === 'ascending') {\n              iconType = 'arrow-up';\n            } else if (sortOrder === 'descending') {\n              iconType = 'arrow-down';\n            }\n            icon.setAttribute('icon', iconType);\n\n            // If sort order is none, return to original order\n            if (sortOrder === 'none') {\n              // Append rows to table\n              rowsDefault.forEach(row => table.querySelector('tbody').append(row));\n              return;\n            }\n\n            // Set a copy of rows\n            const rows = Array.from(table.querySelectorAll('tbody tr'));\n\n            // Sort rows\n            rows.sort((a, b) => {\n              // Get cells\n              const cellA: HTMLTableCellElement = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n              const cellB: HTMLTableCellElement = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n\n              // Get cell values\n              const cellValueA = cellA.dataset.sort ?? cellA.textContent;\n              const cellValueB = cellB.dataset.sort ?? cellB.textContent;\n\n              // Sort cells based on sort order\n              return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);\n            });\n\n            // Append rows to table\n            rows.forEach(row => table.querySelector('tbody').append(row));\n          });\n        }\n      });\n    }\n\n    // Add alignment to columns\n    this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];\n\n    // Create div wrapper for responsive behavior\n    const divWrapper = document.createElement('div');\n    divWrapper.setAttribute('class', this.componentWrapperClass);\n    divWrapper.setAttribute('tabindex', '0');\n    divWrapper.setAttribute('role', 'region');\n\n    // Get table title\n    let captionTable = table.querySelector('caption');\n\n    // If table is sortable we must add a caption\n    if (captionTable === null && isSortable) {\n      captionTable = document.createElement('caption');\n      table.prepend(captionTable);\n    }\n\n    if (captionTable !== null) {\n      // Ensure caption is not visible (otherwhise the table does not have rounded corners)\n      captionTable.className = 'mg-u-visually-hidden';\n\n      // Link caption to div\n      if (!isValidString(captionTable.id)) {\n        captionTable.setAttribute('id', createID(`${this.componentClass}-caption`));\n      }\n      divWrapper.setAttribute('aria-labelledby', captionTable.id);\n\n      // Add sortable caption if neeeded\n      if (isSortable) {\n        captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();\n      }\n    }\n    divWrapper.append(table);\n\n    // Remove existing table from shadow root\n    const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);\n    if (existingTable !== null) {\n      existingTable.remove();\n    }\n    // Append table\n    this.element.shadowRoot.append(divWrapper);\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  componentWillLoad(): void {\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentDidLoad(): void {\n    this.watchSize(this.size);\n    this.watchFullWidth(this.fullWidth);\n    this.watchColumns(this.columns);\n    this.renderTable(this.element.querySelector('table'));\n  }\n\n  /**\n   * Update table\n   */\n  componentWillUpdate(): void {\n    this.renderTable(this.element.shadowRoot.querySelector('table'));\n  }\n}\n"],"version":3}