@maggioli-design-system/mds-input 7.4.0 → 7.4.2
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.
- package/dist/collection/common/browser.js +7 -0
- package/dist/collection/common/floating-controller.js +18 -0
- package/dist/collection/common/keyboard-manager.js +3 -2
- package/dist/documentation.json +1 -1
- package/dist/stats.json +5 -3
- package/dist/types/common/browser.d.ts +2 -0
- package/dist/types/common/floating-controller.d.ts +1 -0
- package/dist/types/common/locale.d.ts +1 -1
- package/documentation.json +1 -1
- package/package.json +4 -4
- package/src/common/browser.ts +10 -0
- package/src/common/floating-controller.ts +20 -0
- package/src/common/keyboard-manager.ts +1 -0
- package/src/common/locale.ts +2 -2
- package/src/fixtures/icons.json +2 -0
- package/src/fixtures/iconsauce.json +1 -0
|
@@ -65,6 +65,23 @@ export class FloatingController {
|
|
|
65
65
|
return { transformOrigin: 'center top' };
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
|
+
this.convertToTransformOrigin = (position) => {
|
|
69
|
+
const positions = {
|
|
70
|
+
top: 'center bottom',
|
|
71
|
+
right: 'left center',
|
|
72
|
+
bottom: 'center top',
|
|
73
|
+
left: 'right center',
|
|
74
|
+
'bottom-end': 'top right',
|
|
75
|
+
'bottom-start': 'top left',
|
|
76
|
+
'left-end': 'right bottom',
|
|
77
|
+
'left-start': 'right top',
|
|
78
|
+
'right-end': 'left bottom',
|
|
79
|
+
'right-start': 'left top',
|
|
80
|
+
'top-end': 'bottom right',
|
|
81
|
+
'top-start': 'bottom left',
|
|
82
|
+
};
|
|
83
|
+
return positions[position];
|
|
84
|
+
};
|
|
68
85
|
this.calculatePosition = () => {
|
|
69
86
|
if (!this._caller)
|
|
70
87
|
return;
|
|
@@ -99,6 +116,7 @@ export class FloatingController {
|
|
|
99
116
|
Object.assign(this._host.style, {
|
|
100
117
|
left: `${x}px`,
|
|
101
118
|
top: `${y}px`,
|
|
119
|
+
transformOrigin: this.convertToTransformOrigin(placement),
|
|
102
120
|
});
|
|
103
121
|
const arrowStyle = {};
|
|
104
122
|
const arrowPosition = {
|
|
@@ -22,8 +22,9 @@ export class KeyboardManager {
|
|
|
22
22
|
this.elements.delete(name);
|
|
23
23
|
};
|
|
24
24
|
this.attachClickBehavior = (name = 'element') => {
|
|
25
|
-
var _a;
|
|
26
|
-
(_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.
|
|
25
|
+
var _a, _b;
|
|
26
|
+
(_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
27
|
+
(_b = this.elements.get(name)) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
27
28
|
};
|
|
28
29
|
this.detachClickBehavior = (name = 'element') => {
|
|
29
30
|
var _a;
|
package/dist/documentation.json
CHANGED
package/dist/stats.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-03-
|
|
2
|
+
"timestamp": "2025-03-13T16:02:29",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "node",
|
|
5
5
|
"version": "22.11.0"
|
|
@@ -9,13 +9,14 @@
|
|
|
9
9
|
"fsNamespace": "mds-input",
|
|
10
10
|
"components": 1,
|
|
11
11
|
"entries": 1,
|
|
12
|
-
"bundles":
|
|
12
|
+
"bundles": 102,
|
|
13
13
|
"outputs": [
|
|
14
14
|
{
|
|
15
15
|
"name": "dist-collection",
|
|
16
|
-
"files":
|
|
16
|
+
"files": 54,
|
|
17
17
|
"generatedFiles": [
|
|
18
18
|
"./dist/collection/common/aria.js",
|
|
19
|
+
"./dist/collection/common/browser.js",
|
|
19
20
|
"./dist/collection/common/date.js",
|
|
20
21
|
"./dist/collection/common/device.js",
|
|
21
22
|
"./dist/collection/common/file.js",
|
|
@@ -1958,6 +1959,7 @@
|
|
|
1958
1959
|
},
|
|
1959
1960
|
"sourceGraph": {
|
|
1960
1961
|
"./src/common/aria.ts": [],
|
|
1962
|
+
"./src/common/browser.ts": [],
|
|
1961
1963
|
"./src/common/date.ts": [],
|
|
1962
1964
|
"./src/common/device.ts": [],
|
|
1963
1965
|
"./src/common/file.ts": [],
|
|
@@ -27,6 +27,7 @@ export declare class FloatingController {
|
|
|
27
27
|
private readonly arrowInset;
|
|
28
28
|
private readonly arrowTransform;
|
|
29
29
|
private readonly arrowTransformOrigin;
|
|
30
|
+
private convertToTransformOrigin;
|
|
30
31
|
private readonly calculatePosition;
|
|
31
32
|
updatePosition(): void;
|
|
32
33
|
dismiss(): void;
|
|
@@ -15,6 +15,6 @@ export declare class Locale {
|
|
|
15
15
|
lang: (el: HTMLElement) => string;
|
|
16
16
|
update: (doc?: Document | ShadowRoot) => void;
|
|
17
17
|
private pluralize;
|
|
18
|
-
get: (tag: string | string[], context?: Record<string, string | number>) => string;
|
|
18
|
+
get: (tag: string | string[], context?: Record<string, string | number | boolean>) => string;
|
|
19
19
|
}
|
|
20
20
|
export {};
|
package/documentation.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/mds-input",
|
|
3
|
-
"version": "7.4.
|
|
3
|
+
"version": "7.4.2",
|
|
4
4
|
"description": "mds-input is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"prepublishOnly": "npm run build"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@maggioli-design-system/mds-button": "6.4.
|
|
26
|
+
"@maggioli-design-system/mds-button": "6.4.2",
|
|
27
27
|
"@maggioli-design-system/mds-icon": "2.13.0",
|
|
28
|
-
"@maggioli-design-system/mds-input-tip": "1.4.
|
|
29
|
-
"@maggioli-design-system/mds-text": "4.7.
|
|
28
|
+
"@maggioli-design-system/mds-input-tip": "1.4.1",
|
|
29
|
+
"@maggioli-design-system/mds-text": "4.7.1",
|
|
30
30
|
"@maggioli-design-system/styles": "15.9.0",
|
|
31
31
|
"@stencil/core": "4.27.2",
|
|
32
32
|
"clsx": "2.1.0"
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
Middleware,
|
|
8
8
|
MiddlewareData,
|
|
9
9
|
offset,
|
|
10
|
+
Placement,
|
|
10
11
|
shift,
|
|
11
12
|
} from '@floating-ui/dom'
|
|
12
13
|
import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
|
|
@@ -138,6 +139,24 @@ export class FloatingController {
|
|
|
138
139
|
}
|
|
139
140
|
}
|
|
140
141
|
|
|
142
|
+
private convertToTransformOrigin = (position: Placement): string => {
|
|
143
|
+
const positions = {
|
|
144
|
+
top: 'center bottom',
|
|
145
|
+
right: 'left center',
|
|
146
|
+
bottom: 'center top',
|
|
147
|
+
left: 'right center',
|
|
148
|
+
'bottom-end': 'top right',
|
|
149
|
+
'bottom-start': 'top left',
|
|
150
|
+
'left-end': 'right bottom',
|
|
151
|
+
'left-start': 'right top',
|
|
152
|
+
'right-end': 'left bottom',
|
|
153
|
+
'right-start': 'left top',
|
|
154
|
+
'top-end': 'bottom right',
|
|
155
|
+
'top-start': 'bottom left',
|
|
156
|
+
}
|
|
157
|
+
return positions[position]
|
|
158
|
+
}
|
|
159
|
+
|
|
141
160
|
private readonly calculatePosition = (): void => {
|
|
142
161
|
if (!this._caller) return
|
|
143
162
|
|
|
@@ -181,6 +200,7 @@ export class FloatingController {
|
|
|
181
200
|
Object.assign(this._host.style, {
|
|
182
201
|
left: `${x}px`,
|
|
183
202
|
top: `${y}px`,
|
|
203
|
+
transformOrigin: this.convertToTransformOrigin(placement),
|
|
184
204
|
})
|
|
185
205
|
|
|
186
206
|
const arrowStyle = {}
|
|
@@ -27,6 +27,7 @@ export class KeyboardManager {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
attachClickBehavior = (name = 'element'): void => {
|
|
30
|
+
this.elements.get(name)?.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent)
|
|
30
31
|
this.elements.get(name)?.addEventListener('keydown', this.handleClickBehaviorDispatchEvent)
|
|
31
32
|
}
|
|
32
33
|
|
package/src/common/locale.ts
CHANGED
|
@@ -52,7 +52,7 @@ export class Locale {
|
|
|
52
52
|
})
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
|
|
55
|
+
private pluralize = (tag: string | string[], context: Record<string, string | number | boolean>): string => {
|
|
56
56
|
|
|
57
57
|
const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
|
|
58
58
|
const phrases: string[] = []
|
|
@@ -81,7 +81,7 @@ export class Locale {
|
|
|
81
81
|
return render(translatePhrase, context)
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
get = (tag: string | string[], context?: Record<string, string | number>): string => {
|
|
84
|
+
get = (tag: string | string[], context?: Record<string, string | number | boolean>): string => {
|
|
85
85
|
if (context) {
|
|
86
86
|
return this.pluralize(tag, context)
|
|
87
87
|
}
|
package/src/fixtures/icons.json
CHANGED
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"mgg/ai-status-suspended",
|
|
53
53
|
"mgg/alerts-pagopa",
|
|
54
54
|
"mgg/anagrafe-nazionale",
|
|
55
|
+
"mgg/anist",
|
|
55
56
|
"mgg/anpr",
|
|
56
57
|
"mgg/ansc",
|
|
57
58
|
"mgg/area-edificabile",
|
|
@@ -361,6 +362,7 @@
|
|
|
361
362
|
"mi/baseline/eco",
|
|
362
363
|
"mi/baseline/email",
|
|
363
364
|
"mi/baseline/error",
|
|
365
|
+
"mi/baseline/expand-more",
|
|
364
366
|
"mi/baseline/explore",
|
|
365
367
|
"mi/baseline/favorite",
|
|
366
368
|
"mi/baseline/favorite-border",
|