mtrl 0.5.2 → 0.5.4

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 (80) hide show
  1. package/dist/components/checkbox/api.d.ts +1 -1
  2. package/dist/components/checkbox/types.d.ts +17 -6
  3. package/dist/components/chips/api.d.ts +5 -2
  4. package/dist/components/chips/chip/api.d.ts +1 -1
  5. package/dist/components/chips/config.d.ts +5 -1
  6. package/dist/components/chips/types.d.ts +14 -3
  7. package/dist/components/index.d.ts +1 -0
  8. package/dist/components/select/types.d.ts +21 -3
  9. package/dist/components/switch/types.d.ts +8 -4
  10. package/dist/index.cjs +14 -14
  11. package/dist/index.cjs.map +13 -13
  12. package/dist/index.js +14 -14
  13. package/dist/index.js.map +13 -13
  14. package/dist/package.json +1 -1
  15. package/dist/styles.css +2 -2
  16. package/package.json +4 -2
  17. package/src/styles/abstract/_base.scss +2 -0
  18. package/src/styles/abstract/_config.scss +28 -0
  19. package/src/styles/abstract/_functions.scss +124 -0
  20. package/src/styles/abstract/_mixins.scss +401 -0
  21. package/src/styles/abstract/_theme.scss +269 -0
  22. package/src/styles/abstract/_variables.scss +338 -0
  23. package/src/styles/base/_reset.scss +86 -0
  24. package/src/styles/base/_typography.scss +155 -0
  25. package/src/styles/components/_badge.scss +183 -0
  26. package/src/styles/components/_bottom-app-bar.scss +103 -0
  27. package/src/styles/components/_button.scss +756 -0
  28. package/src/styles/components/_card.scss +401 -0
  29. package/src/styles/components/_carousel.scss +645 -0
  30. package/src/styles/components/_checkbox.scss +231 -0
  31. package/src/styles/components/_chips.scss +643 -0
  32. package/src/styles/components/_datepicker.scss +358 -0
  33. package/src/styles/components/_dialog.scss +259 -0
  34. package/src/styles/components/_divider.scss +57 -0
  35. package/src/styles/components/_extended-fab.scss +309 -0
  36. package/src/styles/components/_fab.scss +244 -0
  37. package/src/styles/components/_list.scss +774 -0
  38. package/src/styles/components/_menu.scss +245 -0
  39. package/src/styles/components/_navigation-mobile.scss +244 -0
  40. package/src/styles/components/_navigation-system.scss +151 -0
  41. package/src/styles/components/_navigation.scss +407 -0
  42. package/src/styles/components/_progress.scss +101 -0
  43. package/src/styles/components/_radios.scss +187 -0
  44. package/src/styles/components/_search.scss +306 -0
  45. package/src/styles/components/_segmented-button.scss +227 -0
  46. package/src/styles/components/_select.scss +274 -0
  47. package/src/styles/components/_sheet.scss +236 -0
  48. package/src/styles/components/_slider.scss +264 -0
  49. package/src/styles/components/_snackbar.scss +211 -0
  50. package/src/styles/components/_switch.scss +305 -0
  51. package/src/styles/components/_tabs.scss +421 -0
  52. package/src/styles/components/_textfield.scss +1035 -0
  53. package/src/styles/components/_timepicker.scss +451 -0
  54. package/src/styles/components/_tooltip.scss +241 -0
  55. package/src/styles/components/_top-app-bar.scss +225 -0
  56. package/src/styles/main.scss +129 -0
  57. package/src/styles/themes/_autumn.scss +105 -0
  58. package/src/styles/themes/_base-theme.scss +85 -0
  59. package/src/styles/themes/_baseline.scss +173 -0
  60. package/src/styles/themes/_bluekhaki.scss +125 -0
  61. package/src/styles/themes/_brownbeige.scss +125 -0
  62. package/src/styles/themes/_browngreen.scss +125 -0
  63. package/src/styles/themes/_forest.scss +77 -0
  64. package/src/styles/themes/_greenbeige.scss +125 -0
  65. package/src/styles/themes/_index.scss +19 -0
  66. package/src/styles/themes/_material.scss +125 -0
  67. package/src/styles/themes/_ocean.scss +77 -0
  68. package/src/styles/themes/_sageivory.scss +125 -0
  69. package/src/styles/themes/_spring.scss +77 -0
  70. package/src/styles/themes/_summer.scss +87 -0
  71. package/src/styles/themes/_sunset.scss +60 -0
  72. package/src/styles/themes/_tealcaramel.scss +125 -0
  73. package/src/styles/themes/_winter.scss +77 -0
  74. package/src/styles/utilities/_colors.scss +154 -0
  75. package/src/styles/utilities/_flexbox.scss +194 -0
  76. package/src/styles/utilities/_layout.scss +665 -0
  77. package/src/styles/utilities/_ripple.scss +79 -0
  78. package/src/styles/utilities/_spacing.scss +139 -0
  79. package/src/styles/utilities/_typography.scss +178 -0
  80. package/src/styles/utilities/_visibility.scss +142 -0
@@ -1,4 +1,4 @@
1
- import { BaseComponent, CheckboxComponent, ApiOptions } from './types';
1
+ import { BaseComponent, CheckboxComponent, ApiOptions } from "./types";
2
2
  /**
3
3
  * Enhances checkbox component with API methods
4
4
  * @param {ApiOptions} options - API configuration
@@ -106,16 +106,27 @@ export interface CheckboxComponent {
106
106
  */
107
107
  input: HTMLInputElement;
108
108
  /**
109
- * Gets the checkbox's current value attribute
110
- * @returns Current value of the checkbox
109
+ * Gets the checkbox's checked state (boolean) for form compatibility
110
+ * @returns Whether the checkbox is checked
111
111
  */
112
- getValue: () => string;
112
+ getValue: () => boolean;
113
113
  /**
114
- * Sets the checkbox's value attribute
115
- * @param value - New value to set
114
+ * Sets the checkbox's checked state
115
+ * @param value - Boolean or string ("true"/"false"/"1"/"0") value
116
116
  * @returns Checkbox component for method chaining
117
117
  */
118
- setValue: (value: string) => CheckboxComponent;
118
+ setValue: (value: boolean | string) => CheckboxComponent;
119
+ /**
120
+ * Gets the HTML value attribute (rarely needed)
121
+ * @returns The input's value attribute
122
+ */
123
+ getValueAttribute: () => string;
124
+ /**
125
+ * Sets the HTML value attribute (rarely needed)
126
+ * @param value - New value attribute to set
127
+ * @returns Checkbox component for method chaining
128
+ */
129
+ setValueAttribute: (value: string) => CheckboxComponent;
119
130
  /**
120
131
  * Checks the checkbox (sets checked=true)
121
132
  * @returns Checkbox component for method chaining
@@ -1,8 +1,11 @@
1
- import { ChipsComponent, ChipComponent } from './types';
1
+ import { ChipsComponent, ChipComponent } from "./types";
2
2
  /**
3
3
  * API options interface - structured by feature area
4
4
  */
5
5
  interface ApiOptions {
6
+ config: {
7
+ multiSelect: boolean;
8
+ };
6
9
  chips: {
7
10
  addChip: (chipConfig: any) => ChipComponent;
8
11
  removeChip: (chipOrIndex: ChipComponent | number) => void;
@@ -22,7 +25,7 @@ interface ApiOptions {
22
25
  label: {
23
26
  setText: (text: string) => any;
24
27
  getText: () => string;
25
- setPosition: (position: 'start' | 'end') => any;
28
+ setPosition: (position: "start" | "end") => any;
26
29
  getPosition: () => string;
27
30
  };
28
31
  keyboard: {
@@ -1,4 +1,4 @@
1
- import { ApiOptions, ChipComponent } from './types';
1
+ import { ApiOptions, ChipComponent } from "./types";
2
2
  interface ComponentWithElements {
3
3
  element: HTMLElement;
4
4
  text?: {
@@ -28,9 +28,13 @@ export declare const getElementConfig: (config: ChipsConfig) => {
28
28
  /**
29
29
  * Creates API configuration for the Chips component
30
30
  * @param {Object} comp - Component with chips features
31
+ * @param {ChipsConfig} config - Chips configuration
31
32
  * @returns {Object} API configuration object
32
33
  */
33
- export declare const getApiConfig: (comp: any) => {
34
+ export declare const getApiConfig: (comp: any, config?: ChipsConfig) => {
35
+ config: {
36
+ multiSelect: boolean;
37
+ };
34
38
  chips: {
35
39
  addChip: (chipConfig: any) => any;
36
40
  removeChip: (chipOrIndex: any) => any;
@@ -2,7 +2,7 @@
2
2
  * Chip variant types
3
3
  * @category Components
4
4
  */
5
- export type ChipVariant = 'filled' | 'outlined' | 'elevated' | 'assist' | 'filter' | 'input' | 'suggestion';
5
+ export type ChipVariant = "filled" | "outlined" | "elevated" | "assist" | "filter" | "input" | "suggestion";
6
6
  /**
7
7
  * Available chip event types
8
8
  */
@@ -164,7 +164,7 @@ export interface ChipsConfig {
164
164
  * Position of the label (start or end)
165
165
  * @default 'start'
166
166
  */
167
- labelPosition?: 'start' | 'end';
167
+ labelPosition?: "start" | "end";
168
168
  /**
169
169
  * Schema definition for the component structure
170
170
  * @internal
@@ -261,6 +261,17 @@ export interface ChipComponent {
261
261
  * @returns The chip component for chaining
262
262
  */
263
263
  toggleSelected: () => ChipComponent;
264
+ /**
265
+ * Gets the chip's current variant
266
+ * @returns Current variant or null if none set
267
+ */
268
+ getVariant: () => ChipVariant | null;
269
+ /**
270
+ * Sets the chip's variant
271
+ * @param variant - The variant to apply
272
+ * @returns The chip component for chaining
273
+ */
274
+ setVariant: (variant: ChipVariant) => ChipComponent;
264
275
  /**
265
276
  * Destroys the chip component and cleans up resources
266
277
  */
@@ -360,7 +371,7 @@ export interface ChipsComponent {
360
371
  * @param position - Label position ('start' or 'end')
361
372
  * @returns The chips instance for chaining
362
373
  */
363
- setLabelPosition: (position: 'start' | 'end') => ChipsComponent;
374
+ setLabelPosition: (position: "start" | "end") => ChipsComponent;
364
375
  /**
365
376
  * Gets the label position
366
377
  * @returns Label position
@@ -51,6 +51,7 @@ export { default as createButton } from "./button";
51
51
  export { default as createCard } from "./card";
52
52
  export { default as createCarousel } from "./carousel";
53
53
  export { default as createCheckbox } from "./checkbox";
54
+ export { createChip, createChips } from "./chips";
54
55
  export { default as createDatePicker } from "./datepicker";
55
56
  export { default as createDialog } from "./dialog";
56
57
  export { default as createFab } from "./fab";
@@ -143,10 +143,15 @@ export interface SelectComponent {
143
143
  getValue: () => string | null;
144
144
  /**
145
145
  * Sets the select's value (by option id)
146
- * @param value - Option id to select
146
+ * @param value - Option id to select, or null/undefined to clear
147
147
  * @returns Select component for chaining
148
148
  */
149
- setValue: (value: string) => SelectComponent;
149
+ setValue: (value: string | null | undefined) => SelectComponent;
150
+ /**
151
+ * Clears the current selection
152
+ * @returns Select component for chaining
153
+ */
154
+ clear: () => SelectComponent;
150
155
  /**
151
156
  * Gets the select's current displayed text
152
157
  */
@@ -215,6 +220,18 @@ export interface SelectComponent {
215
220
  * @returns Select component for chaining
216
221
  */
217
222
  disable: () => SelectComponent;
223
+ /**
224
+ * Sets the error state on the select
225
+ * @param error - Whether to show error state
226
+ * @param message - Optional error message to display
227
+ * @returns Select component for chaining
228
+ */
229
+ setError: (error: boolean, message?: string) => SelectComponent;
230
+ /**
231
+ * Clears the error state on the select
232
+ * @returns Select component for chaining
233
+ */
234
+ clearError: () => SelectComponent;
218
235
  /**
219
236
  * Destroys the select component
220
237
  */
@@ -274,7 +291,8 @@ export interface SelectEvents {
274
291
  export interface ApiOptions {
275
292
  select: {
276
293
  getValue: () => string | null;
277
- setValue: (value: string) => any;
294
+ setValue: (value: string | null | undefined) => any;
295
+ clear: () => any;
278
296
  getText: () => string;
279
297
  getSelectedOption: () => SelectOption | null;
280
298
  getOptions: () => SelectOption[];
@@ -51,10 +51,14 @@ export interface SwitchComponent {
51
51
  element: HTMLElement;
52
52
  /** The input element */
53
53
  input: HTMLInputElement;
54
- /** Gets the switch's value */
55
- getValue: () => string;
56
- /** Sets the switch's value */
57
- setValue: (value: string) => SwitchComponent;
54
+ /** Gets the switch's checked state (boolean) for form compatibility */
55
+ getValue: () => boolean;
56
+ /** Sets the switch's checked state */
57
+ setValue: (value: boolean | string) => SwitchComponent;
58
+ /** Gets the HTML value attribute (rarely needed) */
59
+ getValueAttribute: () => string;
60
+ /** Sets the HTML value attribute (rarely needed) */
61
+ setValueAttribute: (value: string) => SwitchComponent;
58
62
  /** Checks/activates the switch */
59
63
  check: () => SwitchComponent;
60
64
  /** Unchecks/deactivates the switch */