@moni-labs/moni-ui 0.4.13 → 0.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/custom-elements.json +101 -81
  2. package/dist/browser/moni-ui.iife.min.js +1538 -1384
  3. package/dist/browser/moni-ui.iife.min.js.br +0 -0
  4. package/dist/browser/moni-ui.iife.min.js.gz +0 -0
  5. package/dist/browser/moni-ui.iife.min.js.map +1 -1
  6. package/dist/browser/moni-ui.min.js +2751 -2501
  7. package/dist/browser/moni-ui.min.js.br +0 -0
  8. package/dist/browser/moni-ui.min.js.gz +0 -0
  9. package/dist/browser/moni-ui.min.js.map +1 -1
  10. package/dist/cdn/chunks/{class-map-DsL1Jr2T.js → class-map-QyT9W7rZ.js} +1 -1
  11. package/dist/cdn/chunks/{decorate-DxJYS4gw.js → decorate-B7wZvwrn.js} +629 -543
  12. package/dist/cdn/chunks/if-defined-5hr_ccFw.js +1 -0
  13. package/dist/cdn/chunks/{live-D52JqeKf.js → live-Hm1Di_ND.js} +1 -1
  14. package/dist/cdn/components/moni-app-bar.js +1 -1
  15. package/dist/cdn/components/moni-badge.js +1 -1
  16. package/dist/cdn/components/moni-bottom-sheet.js +2 -1
  17. package/dist/cdn/components/moni-button-group.js +1 -1
  18. package/dist/cdn/components/moni-button-segment.js +1 -1
  19. package/dist/cdn/components/moni-button.js +1 -1
  20. package/dist/cdn/components/moni-card.js +1 -1
  21. package/dist/cdn/components/moni-carousel.js +1 -1
  22. package/dist/cdn/components/moni-checkbox.js +1 -1
  23. package/dist/cdn/components/moni-chip.js +1 -1
  24. package/dist/cdn/components/moni-color-field.js +1 -1
  25. package/dist/cdn/components/moni-context-menu.js +1 -1
  26. package/dist/cdn/components/moni-dialog.js +1 -1
  27. package/dist/cdn/components/moni-divider.js +1 -1
  28. package/dist/cdn/components/moni-expansion.js +1 -1
  29. package/dist/cdn/components/moni-fab-menu.js +1 -1
  30. package/dist/cdn/components/moni-fab.js +1 -1
  31. package/dist/cdn/components/moni-file-field.js +1 -1
  32. package/dist/cdn/components/moni-icon.js +1 -1
  33. package/dist/cdn/components/moni-list-item.js +1 -1
  34. package/dist/cdn/components/moni-list.js +1 -1
  35. package/dist/cdn/components/moni-loading-indicator.js +1 -1
  36. package/dist/cdn/components/moni-menu-item.js +1 -1
  37. package/dist/cdn/components/moni-menu.js +1 -1
  38. package/dist/cdn/components/moni-morph-modal.js +3 -2
  39. package/dist/cdn/components/moni-nav-item.js +1 -1
  40. package/dist/cdn/components/moni-nav.js +1 -1
  41. package/dist/cdn/components/moni-progress.js +1 -1
  42. package/dist/cdn/components/moni-radio.js +1 -1
  43. package/dist/cdn/components/moni-ripple.js +1 -1
  44. package/dist/cdn/components/moni-segmented-button.js +1 -1
  45. package/dist/cdn/components/moni-select-option.js +1 -1
  46. package/dist/cdn/components/moni-select.js +512 -473
  47. package/dist/cdn/components/moni-shape.js +1 -1
  48. package/dist/cdn/components/moni-side-sheet.js +1 -1
  49. package/dist/cdn/components/moni-slider.js +1 -1
  50. package/dist/cdn/components/moni-snackbar.js +1 -1
  51. package/dist/cdn/components/moni-split-button.js +1 -1
  52. package/dist/cdn/components/moni-step.js +1 -1
  53. package/dist/cdn/components/moni-stepper.js +1 -1
  54. package/dist/cdn/components/moni-switch.js +1 -1
  55. package/dist/cdn/components/moni-tab.js +1 -1
  56. package/dist/cdn/components/moni-tabs.js +1 -1
  57. package/dist/cdn/components/moni-text-field.js +122 -95
  58. package/dist/cdn/components/moni-textarea.js +52 -52
  59. package/dist/cdn/components/moni-time-picker.js +1 -1
  60. package/dist/cdn/components/moni-toolbar.js +1 -1
  61. package/dist/cdn/components/moni-tooltip.js +1 -1
  62. package/dist/cdn/components/moni-typography.js +1 -1
  63. package/dist/cdn/importmap.json +98 -98
  64. package/dist/components/_base/field-styles.d.ts.map +1 -1
  65. package/dist/components/_base/field-styles.js +662 -576
  66. package/dist/components/moni-bottom-sheet.d.ts +19 -5
  67. package/dist/components/moni-bottom-sheet.d.ts.map +1 -1
  68. package/dist/components/moni-bottom-sheet.js +111 -30
  69. package/dist/components/moni-morph-modal.d.ts +10 -0
  70. package/dist/components/moni-morph-modal.d.ts.map +1 -1
  71. package/dist/components/moni-morph-modal.js +323 -217
  72. package/dist/components/moni-select.d.ts +16 -16
  73. package/dist/components/moni-select.d.ts.map +1 -1
  74. package/dist/components/moni-select.js +797 -727
  75. package/dist/components/moni-text-field.d.ts +15 -15
  76. package/dist/components/moni-text-field.d.ts.map +1 -1
  77. package/dist/components/moni-text-field.js +224 -180
  78. package/dist/components/moni-textarea.d.ts +13 -13
  79. package/dist/components/moni-textarea.d.ts.map +1 -1
  80. package/dist/components/moni-textarea.js +127 -122
  81. package/docs/api.json +109 -89
  82. package/docs/assets/moni-color-field/shape--square.png +0 -0
  83. package/docs/assets/moni-file-field/shape--square.png +0 -0
  84. package/docs/assets/moni-morph-modal/autoHeight--false.png +0 -0
  85. package/docs/assets/moni-morph-modal/autoHeight--true.png +0 -0
  86. package/docs/components/bottom-sheet.md +2 -1
  87. package/docs/components/morph-modal.md +16 -7
  88. package/docs/components/select.md +74 -74
  89. package/docs/components/text-field.md +75 -66
  90. package/docs/components/textarea.md +51 -51
  91. package/docs/llms.txt +3 -3
  92. package/package.json +1 -1
  93. package/src/components/_base/field-styles.ts +723 -637
  94. package/src/components/moni-bottom-sheet.test.ts +331 -0
  95. package/src/components/moni-bottom-sheet.ts +117 -29
  96. package/src/components/moni-morph-modal.test.ts +490 -413
  97. package/src/components/moni-morph-modal.ts +2274 -2162
  98. package/src/components/moni-select.test.ts +489 -466
  99. package/src/components/moni-select.ts +1963 -1815
  100. package/src/components/moni-text-field.test.ts +366 -342
  101. package/src/components/moni-text-field.ts +717 -645
  102. package/src/components/moni-textarea.test.ts +201 -197
  103. package/src/components/moni-textarea.ts +476 -460
  104. package/dist/cdn/chunks/if-defined-DdzvcoI7.js +0 -1
@@ -4,9 +4,9 @@
4
4
  * @license MIT
5
5
  * @contributors Moni Labs & Contributors
6
6
  */
7
- import { MoniElement } from './_base/index.js';
8
- import './moni-icon.js';
9
- import './moni-progress.js';
7
+ import { MoniElement } from "./_base/index.js";
8
+ import "./moni-icon.js";
9
+ import "./moni-progress.js";
10
10
  /**
11
11
  * Componente Material Design 3 Textarea (Área de texto).
12
12
  *
@@ -72,19 +72,19 @@ export declare class MoniTextarea extends MoniElement {
72
72
  * @type {'filled' | 'outlined'}
73
73
  * @default 'filled'
74
74
  */
75
- variant: 'filled' | 'outlined';
75
+ variant: "filled" | "outlined";
76
76
  /**
77
77
  * Define las dimensiones del área de texto.
78
78
  * @type {'small' | 'medium' | 'large' | 'extra'}
79
79
  * @default 'medium'
80
80
  */
81
- size: 'small' | 'medium' | 'large' | 'extra';
81
+ size: "small" | "medium" | "large" | "extra";
82
82
  /**
83
83
  * Forma del radio del borde (border-radius) del campo.
84
84
  * @type {'round' | 'small-round' | 'square' | 'no-round'}
85
85
  * @default 'no-round'
86
86
  */
87
- shape: 'round' | 'small-round' | 'square' | 'no-round';
87
+ shape: "round" | "small-round" | "square" | "no-round";
88
88
  /**
89
89
  * Nombre del icono inicial (leading) (Material Symbols).
90
90
  * @type {string}
@@ -186,12 +186,12 @@ export declare class MoniTextarea extends MoniElement {
186
186
  * `required` se pintaría pero no detendría el envío.
187
187
  */
188
188
  /**
189
- * API de validación equivalente a la de un control nativo.
190
- *
191
- * Los elementos form-associated participan en la validación del formulario,
192
- * pero no reciben estos miembros automáticamente: hay que exponerlos para que
193
- * un `moni-textarea` se pueda interrogar igual que un `<input>`.
194
- */
189
+ * API de validación equivalente a la de un control nativo.
190
+ *
191
+ * Los elementos form-associated participan en la validación del formulario,
192
+ * pero no reciben estos miembros automáticamente: hay que exponerlos para que
193
+ * un `moni-textarea` se pueda interrogar igual que un `<input>`.
194
+ */
195
195
  get validity(): ValidityState;
196
196
  get validationMessage(): string;
197
197
  checkValidity(): boolean;
@@ -215,7 +215,7 @@ export declare class MoniTextarea extends MoniElement {
215
215
  }
216
216
  declare global {
217
217
  interface HTMLElementTagNameMap {
218
- 'moni-textarea': MoniTextarea;
218
+ "moni-textarea": MoniTextarea;
219
219
  }
220
220
  }
221
221
  export default MoniTextarea;
@@ -1 +1 @@
1
- {"version":3,"file":"moni-textarea.d.ts","sourceRoot":"","sources":["../../src/components/moni-textarea.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;;OAIG;IAC0B,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE;;;;OAIG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD;;;;OAIG;IAEH,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAc;IAEpE;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACwC,IAAI,SAAK;IAEpD,mEAAmE;IACvB,QAAQ,UAAS;IAE7D,4FAA4F;IAC1B,OAAO,SAAK;IAE9E;;;;OAIG;IACwC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAQ3E,oFAAoF;IACxC,QAAQ,UAAS;IAE7D,iFAAiF;IACrC,QAAQ,UAAS;IAE7D,sCAAsC;IACK,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3E,6CAA6C;IAChB,YAAY,SAAM;IAE/C;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACmD,SAAS,SAAM;IAErE;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;OAGG;IAC0B,WAAW,SAAM;IAE3B,OAAO,CAAC,MAAM,CAAuB;IACxD,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,iBAAiB;IAKjB,oBAAoB;IAMpB,YAAY;IAKrB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAyBd,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAoB9C;;;;;;OAMG;IACJ;;;;;;WAMI;IACH,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,OAAO,CAAC,aAAa;IASrB,OAAgB,MAAM,4BAEnB;IAEH;;;;;;;;;;;;OAYG;IACM,MAAM;CA0Gf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"moni-textarea.d.ts","sourceRoot":"","sources":["../../src/components/moni-textarea.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;;OAIG;IAC0B,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE;;;;OAIG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD;;;;OAIG;IAEH,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAc;IAEpE;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACwC,IAAI,SAAK;IAEpD,mEAAmE;IACvB,QAAQ,UAAS;IAE7D,4FAA4F;IAC1B,OAAO,SAAK;IAE9E;;;;OAIG;IACwC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAQ3E,oFAAoF;IACxC,QAAQ,UAAS;IAE7D,iFAAiF;IACrC,QAAQ,UAAS;IAE7D,sCAAsC;IACK,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3E,6CAA6C;IAChB,YAAY,SAAM;IAE/C;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACmD,SAAS,SAAM;IAErE;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;OAGG;IAC0B,WAAW,SAAM;IAE3B,OAAO,CAAC,MAAM,CAAuB;IACxD,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,iBAAiB;IAKjB,oBAAoB;IAMpB,YAAY;IAKrB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAkCd,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAqB9C;;;;;;OAMG;IACH;;;;;;OAMG;IACH,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,OAAO,CAAC,aAAa;IASrB,OAAgB,MAAM,4BAQpB;IAEF;;;;;;;;;;;;OAYG;IACM,MAAM;CA0GhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF;AAED,eAAe,YAAY,CAAC"}
@@ -10,13 +10,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
10
10
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11
11
  return c > 3 && r && Object.defineProperty(target, key, r), r;
12
12
  };
13
- import { css, html, nothing } from 'lit';
14
- import { customElement, property, query } from 'lit/decorators.js';
15
- import { ifDefined } from 'lit/directives/if-defined.js';
16
- import { classMap } from 'lit/directives/class-map.js';
17
- import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
18
- import './moni-icon.js';
19
- import './moni-progress.js';
13
+ import { css, html, nothing } from "lit";
14
+ import { customElement, property, query } from "lit/decorators.js";
15
+ import { ifDefined } from "lit/directives/if-defined.js";
16
+ import { classMap } from "lit/directives/class-map.js";
17
+ import { MoniElement, sharedStyles, fieldStyles } from "./_base/index.js";
18
+ import "./moni-icon.js";
19
+ import "./moni-progress.js";
20
20
  /**
21
21
  * Componente Material Design 3 Textarea (Área de texto).
22
22
  *
@@ -71,50 +71,50 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
71
71
  * El nombre del textarea, enviado con los datos del formulario.
72
72
  * @type {string}
73
73
  */
74
- this.name = '';
74
+ this.name = "";
75
75
  /**
76
76
  * El texto de la etiqueta flotante.
77
77
  * @type {string}
78
78
  */
79
- this.label = '';
79
+ this.label = "";
80
80
  /**
81
81
  * Variante visual del área de texto.
82
82
  * @type {'filled' | 'outlined'}
83
83
  * @default 'filled'
84
84
  */
85
- this.variant = 'filled';
85
+ this.variant = "filled";
86
86
  /**
87
87
  * Define las dimensiones del área de texto.
88
88
  * @type {'small' | 'medium' | 'large' | 'extra'}
89
89
  * @default 'medium'
90
90
  */
91
- this.size = 'medium';
91
+ this.size = "medium";
92
92
  /**
93
93
  * Forma del radio del borde (border-radius) del campo.
94
94
  * @type {'round' | 'small-round' | 'square' | 'no-round'}
95
95
  * @default 'no-round'
96
96
  */
97
- this.shape = 'no-round';
97
+ this.shape = "no-round";
98
98
  /**
99
99
  * Nombre del icono inicial (leading) (Material Symbols).
100
100
  * @type {string}
101
101
  */
102
- this.icon = '';
102
+ this.icon = "";
103
103
  /**
104
104
  * Nombre del icono final (trailing) (Material Symbols).
105
105
  * @type {string}
106
106
  */
107
- this.trailingIcon = '';
107
+ this.trailingIcon = "";
108
108
  /**
109
109
  * Prefijo de texto corto mostrado antes del valor del input.
110
110
  * @type {string}
111
111
  */
112
- this.prefix = '';
112
+ this.prefix = "";
113
113
  /**
114
114
  * Sufijo de texto corto mostrado después del valor del input.
115
115
  * @type {string}
116
116
  */
117
- this.suffix = '';
117
+ this.suffix = "";
118
118
  /**
119
119
  * Número por defecto de líneas de texto visibles.
120
120
  * @type {number}
@@ -143,7 +143,7 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
143
143
  /** Mínimo de caracteres aceptados. */
144
144
  this.minlength = null;
145
145
  /** Pista de autocompletado del navegador. */
146
- this.autocomplete = '';
146
+ this.autocomplete = "";
147
147
  /**
148
148
  * Oculta la visualización del contador de caracteres cuando se establece `maxlength`.
149
149
  * @type {boolean}
@@ -163,13 +163,13 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
163
163
  * Texto de ayuda mostrado debajo del campo.
164
164
  * @type {string}
165
165
  */
166
- this.helper = '';
166
+ this.helper = "";
167
167
  /**
168
168
  * Texto de error mostrado debajo del campo cuando `error` es true.
169
169
  * Sobrescribe el texto de ayuda.
170
170
  * @type {string}
171
171
  */
172
- this.errorText = '';
172
+ this.errorText = "";
173
173
  /**
174
174
  * Si es true, establece el campo en un estado de error.
175
175
  * @type {boolean}
@@ -179,12 +179,12 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
179
179
  * El valor actual del área de texto.
180
180
  * @type {string}
181
181
  */
182
- this.value = '';
182
+ this.value = "";
183
183
  /**
184
184
  * Texto de marcador de posición (placeholder) mostrado cuando el textarea está vacío y la etiqueta es flotante.
185
185
  * @type {string}
186
186
  */
187
- this.placeholder = '';
187
+ this.placeholder = "";
188
188
  this._internals = this.attachInternals();
189
189
  }
190
190
  connectedCallback() {
@@ -211,38 +211,41 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
211
211
  if (!input)
212
212
  return;
213
213
  if (!this.autosize) {
214
- input.style.removeProperty('block-size');
215
- input.style.removeProperty('overflow-y');
214
+ input.style.removeProperty("block-size");
215
+ input.style.removeProperty("overflow-y");
216
216
  return;
217
217
  }
218
218
  const styles = getComputedStyle(input);
219
219
  const lineHeight = Number.parseFloat(styles.lineHeight) || 24;
220
- const padding = Number.parseFloat(styles.paddingTop) + Number.parseFloat(styles.paddingBottom);
221
- const border = Number.parseFloat(styles.borderTopWidth) + Number.parseFloat(styles.borderBottomWidth);
220
+ const padding = Number.parseFloat(styles.paddingTop) +
221
+ Number.parseFloat(styles.paddingBottom);
222
+ const border = Number.parseFloat(styles.borderTopWidth) +
223
+ Number.parseFloat(styles.borderBottomWidth);
222
224
  const minimum = lineHeight * Math.max(1, this.rows) + padding + border;
223
225
  const maximum = this.maxRows > 0
224
226
  ? lineHeight * Math.max(this.rows, this.maxRows) + padding + border
225
227
  : Number.POSITIVE_INFINITY;
226
- input.style.blockSize = 'auto';
228
+ input.style.blockSize = "auto";
227
229
  const height = Math.min(maximum, Math.max(minimum, input.scrollHeight + border));
228
230
  input.style.blockSize = `${height}px`;
229
- input.style.overflowY = input.scrollHeight + border > maximum ? 'auto' : 'hidden';
231
+ input.style.overflowY =
232
+ input.scrollHeight + border > maximum ? "auto" : "hidden";
230
233
  }
231
234
  updated(changed) {
232
235
  if (this._input) {
233
- if (changed.has('value')) {
236
+ if (changed.has("value")) {
234
237
  this._input.value = this.value;
235
238
  this._internals?.setFormValue?.(this.value);
236
239
  }
237
- if (changed.has('disabled'))
240
+ if (changed.has("disabled"))
238
241
  this._input.disabled = this.disabled;
239
- if (changed.has('maxlength') && this.maxlength != null) {
242
+ if (changed.has("maxlength") && this.maxlength != null) {
240
243
  this._input.maxLength = this.maxlength;
241
244
  }
242
- if (changed.has('value') ||
243
- changed.has('autosize') ||
244
- changed.has('rows') ||
245
- changed.has('maxRows'))
245
+ if (changed.has("value") ||
246
+ changed.has("autosize") ||
247
+ changed.has("rows") ||
248
+ changed.has("maxRows"))
246
249
  this._resizeTextarea();
247
250
  }
248
251
  this._syncValidity();
@@ -255,12 +258,12 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
255
258
  * `required` se pintaría pero no detendría el envío.
256
259
  */
257
260
  /**
258
- * API de validación equivalente a la de un control nativo.
259
- *
260
- * Los elementos form-associated participan en la validación del formulario,
261
- * pero no reciben estos miembros automáticamente: hay que exponerlos para que
262
- * un `moni-textarea` se pueda interrogar igual que un `<input>`.
263
- */
261
+ * API de validación equivalente a la de un control nativo.
262
+ *
263
+ * Los elementos form-associated participan en la validación del formulario,
264
+ * pero no reciben estos miembros automáticamente: hay que exponerlos para que
265
+ * un `moni-textarea` se pueda interrogar igual que un `<input>`.
266
+ */
264
267
  get validity() {
265
268
  return this._internals.validity;
266
269
  }
@@ -278,9 +281,15 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
278
281
  return;
279
282
  this._internals.setValidity(this._input.validity, this._input.validationMessage, this._input);
280
283
  }
281
- static { this.styles = [sharedStyles, fieldStyles, css `
282
- :host([autosize]) textarea { resize: none; }
283
- `]; }
284
+ static { this.styles = [
285
+ sharedStyles,
286
+ fieldStyles,
287
+ css `
288
+ :host([autosize]) textarea {
289
+ resize: none;
290
+ }
291
+ `,
292
+ ]; }
284
293
  /**
285
294
  * Renderiza el campo del área de texto con etiqueta, iconos de prefijo/sufijo y contador de caracteres.
286
295
  *
@@ -296,103 +305,99 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
296
305
  */
297
306
  render() {
298
307
  const hasLeading = Boolean(this.icon) || Boolean(this.prefix);
299
- const hasTrailing = Boolean(this.trailingIcon) ||
300
- Boolean(this.suffix) ||
301
- this.loading;
308
+ const hasTrailing = Boolean(this.trailingIcon) || Boolean(this.suffix) || this.loading;
302
309
  const isActive = Boolean(this.value) || Boolean(this.placeholder);
303
310
  const showCounter = !this.noCounter && this.maxlength != null && this.maxlength > 0;
304
311
  const fieldClasses = {
305
312
  field: true,
306
313
  label: Boolean(this.label),
307
- fill: this.variant === 'filled',
308
- border: this.variant === 'outlined',
309
- small: this.size === 'small',
310
- large: this.size === 'large',
311
- extra: this.size === 'extra',
314
+ fill: this.variant === "filled",
315
+ border: this.variant === "outlined",
316
+ small: this.size === "small",
317
+ large: this.size === "large",
318
+ extra: this.size === "extra",
312
319
  prefix: hasLeading,
313
320
  suffix: hasTrailing,
314
321
  invalid: this.error,
315
- round: this.shape === 'round',
316
- 'small-round': this.shape === 'small-round',
317
- square: this.shape === 'no-round'
322
+ round: this.shape === "round",
323
+ "small-round": this.shape === "small-round",
324
+ square: this.shape === "no-round",
318
325
  };
319
- const placeholder = this.placeholder || (this.label ? ' ' : '');
326
+ const placeholder = this.placeholder || (this.label ? " " : "");
320
327
  const leading = this.icon
321
- ? html `<i class="leading-icon" part="leading-icon"
322
- ><moni-icon name="${this.icon}"></moni-icon
323
- ></i>`
328
+ ? html `<i class="leading-icon" part="leading-icon"
329
+ ><moni-icon name="${this.icon}"></moni-icon
330
+ ></i>`
324
331
  : this.prefix
325
- ? html `<span class="leading-icon" part="prefix"
326
- >${this.prefix}</span
327
- >`
332
+ ? html `<span class="leading-icon" part="prefix">${this.prefix}</span>`
328
333
  : nothing;
329
334
  const trailing = this.loading
330
- ? html `<i class="trailing-icon" part="trailing-icon"
331
- ><moni-progress
332
- variant="circular"
333
- indeterminate
334
- size="small"
335
- style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
336
- ></moni-progress
337
- ></i>`
335
+ ? html `<i class="trailing-icon" part="trailing-icon"
336
+ ><moni-progress
337
+ variant="circular"
338
+ indeterminate
339
+ size="small"
340
+ style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
341
+ ></moni-progress
342
+ ></i>`
338
343
  : this.trailingIcon
339
- ? html `<i class="trailing-icon" part="trailing-icon"
340
- ><moni-icon name="${this.trailingIcon}"></moni-icon
341
- ></i>`
344
+ ? html `<i class="trailing-icon" part="trailing-icon"
345
+ ><moni-icon name="${this.trailingIcon}"></moni-icon
346
+ ></i>`
342
347
  : this.suffix
343
- ? html `<span class="trailing-icon" part="suffix"
344
- >${this.suffix}</span
345
- >`
348
+ ? html `<span class="trailing-icon" part="suffix"
349
+ >${this.suffix}</span
350
+ >`
346
351
  : nothing;
347
352
  // Especificación M3: texto de soporte a la izquierda, contador de caracteres a la derecha.
348
353
  const counter = showCounter
349
- ? html `<output part="counter" class="counter"
350
- >${this.value.length} / ${this.maxlength}</output
351
- >`
354
+ ? html `<output part="counter" class="counter"
355
+ >${this.value.length} / ${this.maxlength}</output
356
+ >`
352
357
  : nothing;
353
358
  const helperText = this.error
354
- ? html `<output part="helper" class="invalid"
355
- >${this.errorText || this.helper}</output
356
- >`
359
+ ? html `<output part="helper" class="invalid"
360
+ >${this.errorText || this.helper}</output
361
+ >`
357
362
  : this.helper
358
363
  ? html `<output part="helper">${this.helper}</output>`
359
364
  : nothing;
360
365
  const hasFooter = helperText || counter;
361
- return html `<div class=${classMap(fieldClasses)} part="field">
362
- ${leading}
363
- <textarea
364
- id="input"
365
- part="input"
366
- rows=${this.rows}
367
- maxlength=${ifDefined(this.maxlength ?? undefined)}
368
- minlength=${ifDefined(this.minlength ?? undefined)}
369
- placeholder=${placeholder}
370
- ?disabled=${this.disabled}
371
- ?required=${this.required}
372
- ?readonly=${this.readonly}
373
- autocomplete=${ifDefined(this.autocomplete || undefined)}
374
- .value=${this.value}
375
- name=${ifDefined(this.name || undefined)}
376
- class=${isActive ? 'active' : ''}
377
- @input=${this._handleInput}
378
- ></textarea>
379
- ${this.label
380
- ? html `<label
381
- for="input"
382
- part="label"
383
- class=${classMap({ active: isActive })}
384
- >${this.label}</label
385
- >`
386
- : nothing}
387
- ${trailing}
388
- ${hasFooter
389
- ? html `<div class="footer" part="footer">
390
- ${helperText}
391
- <div class="spacer"></div>
392
- ${counter}
393
- </div>`
394
- : nothing}
395
- </div>`;
366
+ return html `<div class=${classMap(fieldClasses)} part="field">
367
+ ${leading}
368
+ <textarea
369
+ id="input"
370
+ part="input"
371
+ rows=${this.rows}
372
+ maxlength=${ifDefined(this.maxlength ?? undefined)}
373
+ minlength=${ifDefined(this.minlength ?? undefined)}
374
+ placeholder=${placeholder}
375
+ ?disabled=${this.disabled}
376
+ ?required=${this.required}
377
+ ?readonly=${this.readonly}
378
+ autocomplete=${ifDefined(this.autocomplete || undefined)}
379
+ .value=${this.value}
380
+ name=${ifDefined(this.name || undefined)}
381
+ class=${isActive ? "active" : ""}
382
+ @input=${this._handleInput}
383
+ ></textarea>
384
+ ${this.label
385
+ ? html `<label
386
+ for="input"
387
+ part="label"
388
+ class=${classMap({ active: isActive })}
389
+ >${this.label}</label
390
+ >`
391
+ : nothing}
392
+ ${trailing}
393
+ ${hasFooter
394
+ ? html `<div class="footer" part="footer">
395
+ ${helperText}
396
+ <div class="spacer"></div>
397
+ ${counter}
398
+ </div>`
399
+ : nothing}
400
+ </div>`;
396
401
  }
397
402
  };
398
403
  __decorate([
@@ -414,7 +419,7 @@ __decorate([
414
419
  property({ reflect: true })
415
420
  ], MoniTextarea.prototype, "icon", void 0);
416
421
  __decorate([
417
- property({ reflect: true, attribute: 'trailing-icon' })
422
+ property({ reflect: true, attribute: "trailing-icon" })
418
423
  ], MoniTextarea.prototype, "trailingIcon", void 0);
419
424
  __decorate([
420
425
  property({ reflect: true })
@@ -429,7 +434,7 @@ __decorate([
429
434
  property({ type: Boolean, reflect: true })
430
435
  ], MoniTextarea.prototype, "autosize", void 0);
431
436
  __decorate([
432
- property({ type: Number, reflect: true, attribute: 'max-rows' })
437
+ property({ type: Number, reflect: true, attribute: "max-rows" })
433
438
  ], MoniTextarea.prototype, "maxRows", void 0);
434
439
  __decorate([
435
440
  property({ type: Number, reflect: true })
@@ -447,7 +452,7 @@ __decorate([
447
452
  property({ reflect: true })
448
453
  ], MoniTextarea.prototype, "autocomplete", void 0);
449
454
  __decorate([
450
- property({ type: Boolean, reflect: true, attribute: 'no-counter' })
455
+ property({ type: Boolean, reflect: true, attribute: "no-counter" })
451
456
  ], MoniTextarea.prototype, "noCounter", void 0);
452
457
  __decorate([
453
458
  property({ type: Boolean, reflect: true })
@@ -459,7 +464,7 @@ __decorate([
459
464
  property({ reflect: true })
460
465
  ], MoniTextarea.prototype, "helper", void 0);
461
466
  __decorate([
462
- property({ reflect: true, attribute: 'error-text' })
467
+ property({ reflect: true, attribute: "error-text" })
463
468
  ], MoniTextarea.prototype, "errorText", void 0);
464
469
  __decorate([
465
470
  property({ type: Boolean, reflect: true })
@@ -471,10 +476,10 @@ __decorate([
471
476
  property({ reflect: true })
472
477
  ], MoniTextarea.prototype, "placeholder", void 0);
473
478
  __decorate([
474
- query('textarea')
479
+ query("textarea")
475
480
  ], MoniTextarea.prototype, "_input", void 0);
476
481
  MoniTextarea = __decorate([
477
- customElement('moni-textarea')
482
+ customElement("moni-textarea")
478
483
  ], MoniTextarea);
479
484
  export { MoniTextarea };
480
485
  export default MoniTextarea;