@ds-autonomie/web-components 1.2.0 → 1.4.0
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/CHANGELOG.md +27 -0
- package/dist/chunks/{chunk.J2XNYTTZ.js → chunk.3GJ3KGGY.js} +2 -18
- package/dist/chunks/{chunk.FHGXKQDW.js → chunk.3Y56GJS7.js} +7 -7
- package/dist/chunks/{chunk.JLMY5OVR.js → chunk.4TRQBTMY.js} +68 -57
- package/dist/chunks/{chunk.GRV3MK3D.js → chunk.4XH7INOL.js} +1 -1
- package/dist/chunks/{chunk.P2AJBSND.js → chunk.5DKPV25M.js} +1 -1
- package/dist/chunks/{chunk.3BL7JA77.js → chunk.5KOTVDN5.js} +2 -7
- package/dist/chunks/{chunk.LUHEO6AS.js → chunk.5ND4OP7Q.js} +4 -4
- package/dist/chunks/{chunk.3I2KXA35.js → chunk.5NO4YOTV.js} +1 -1
- package/dist/chunks/{chunk.NBPVVWJU.js → chunk.7BYKP4SA.js} +4 -0
- package/dist/chunks/{chunk.SQMWMSBA.js → chunk.7OLEA3GQ.js} +33 -3
- package/dist/chunks/{chunk.UPYCV66H.js → chunk.A3UKO7AU.js} +1 -1
- package/dist/chunks/{chunk.5BTJP6HC.js → chunk.BGNHUCCD.js} +1 -1
- package/dist/chunks/{chunk.WG5VRMQG.js → chunk.BHLKMLHB.js} +1 -1
- package/dist/chunks/{chunk.VM355VAS.js → chunk.BL4IZFBA.js} +1 -5
- package/dist/chunks/{chunk.4DWONP4W.js → chunk.BNJQHJKO.js} +1 -1
- package/dist/chunks/{chunk.DC6CT5PU.js → chunk.C7CCBBLF.js} +1 -8
- package/dist/chunks/{chunk.NQU3YD5L.js → chunk.D2QVNPSR.js} +7 -7
- package/dist/chunks/{chunk.K6YLMID4.js → chunk.DXP3BNWO.js} +4 -4
- package/dist/chunks/{chunk.OGQBKAFT.js → chunk.E7NM6WTF.js} +1 -1
- package/dist/chunks/{chunk.DOMRNQHQ.js → chunk.FSXPFNBX.js} +1 -1
- package/dist/chunks/{chunk.OXSDZ5LQ.js → chunk.GY5KJYSY.js} +88 -13
- package/dist/chunks/chunk.H2JSXKGD.js +83 -0
- package/dist/chunks/{chunk.3HI3T5R2.js → chunk.HCQNPYQZ.js} +1 -1
- package/dist/chunks/chunk.HRBNFVC5.js +16 -0
- package/dist/chunks/{chunk.ZKYSHEVZ.js → chunk.IER4ZBFV.js} +3 -1
- package/dist/chunks/{chunk.ZVGZDTBF.js → chunk.IFXLU6P3.js} +8 -16
- package/dist/chunks/{chunk.FKIKQX6B.js → chunk.IH3JU5S6.js} +1 -1
- package/dist/chunks/{chunk.B4O7IAPL.js → chunk.IV2XMACC.js} +60 -58
- package/dist/chunks/{chunk.ZXVIEHXI.js → chunk.N5ZXUW7H.js} +1 -1
- package/dist/chunks/{chunk.J6XP4AFN.js → chunk.N7ZCXHGU.js} +1 -1
- package/dist/chunks/{chunk.7HGZSZJK.js → chunk.O4XPNLT4.js} +20 -0
- package/dist/chunks/{chunk.ORSUTGLR.js → chunk.P7QMP76I.js} +4 -3
- package/dist/chunks/{chunk.RDVFMQLV.js → chunk.PCT24AYO.js} +3 -3
- package/dist/chunks/chunk.RCSAV4XJ.js +99 -0
- package/dist/chunks/{chunk.IJL7YMFL.js → chunk.RVUFDCSS.js} +1 -1
- package/dist/chunks/{chunk.TINRLVWL.js → chunk.SCNCYZ35.js} +3 -3
- package/dist/chunks/{chunk.AFAQWHMU.js → chunk.T4H7RAXS.js} +2 -2
- package/dist/chunks/{chunk.XJPCULMC.js → chunk.TSK67ZZE.js} +6 -6
- package/dist/chunks/{chunk.DRGGQ4WL.js → chunk.UCJGKOXX.js} +1 -0
- package/dist/chunks/{chunk.KOZIER6A.js → chunk.WF42CVOM.js} +7 -7
- package/dist/chunks/{chunk.JJ3GF7YP.js → chunk.XCG5TV7T.js} +4 -4
- package/dist/chunks/{chunk.MDFIMRCC.js → chunk.XV2S7PIY.js} +1 -1
- package/dist/components/accordion/accordion.js +5 -5
- package/dist/components/alert/alert.js +6 -6
- package/dist/components/anchor-tag/anchor-tag.d.ts +42 -0
- package/dist/components/anchor-tag/anchor-tag.js +11 -0
- package/dist/components/anchor-tag/anchor-tag.styles.d.ts +2 -0
- package/dist/components/anchor-tag/anchor-tag.styles.js +8 -0
- package/dist/components/animation/animation.js +2 -2
- package/dist/components/avatar/avatar.js +5 -5
- package/dist/components/badge/badge.d.ts +0 -2
- package/dist/components/badge/badge.js +2 -2
- package/dist/components/badge/badge.styles.js +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +5 -5
- package/dist/components/breadcrumb-item/breadcrumb-item.js +2 -2
- package/dist/components/button/button.js +8 -8
- package/dist/components/button/button.styles.js +1 -1
- package/dist/components/checkbox/checkbox.js +7 -7
- package/dist/components/checkbox-button/checkbox-button.js +6 -6
- package/dist/components/checkbox-button/checkbox-button.styles.js +2 -2
- package/dist/components/checkbox-group/checkbox-group.js +2 -2
- package/dist/components/combobox/combobox.d.ts +22 -1
- package/dist/components/combobox/combobox.js +12 -9
- package/dist/components/combobox/combobox.styles.js +1 -1
- package/dist/components/dialog/dialog.js +7 -7
- package/dist/components/drawer/drawer.js +7 -7
- package/dist/components/dropdown/dropdown.js +2 -2
- package/dist/components/format-bytes/format-bytes.js +2 -2
- package/dist/components/format-date/format-date.js +2 -2
- package/dist/components/format-number/format-number.js +2 -2
- package/dist/components/icon/icon.js +3 -3
- package/dist/components/icon-button/icon-button.js +4 -4
- package/dist/components/input/input.js +8 -8
- package/dist/components/input-mask/input-mask.configs.d.ts +1 -0
- package/dist/components/input-mask/input-mask.configs.js +1 -1
- package/dist/components/input-mask/input-mask.d.ts +30 -6
- package/dist/components/input-mask/input-mask.js +5 -5
- package/dist/components/input-mask/input-mask.utils.d.ts +7 -1
- package/dist/components/input-mask/input-mask.utils.js +7 -3
- package/dist/components/input-phone/input-phone.configs.d.ts +1 -0
- package/dist/components/input-phone/input-phone.configs.js +1 -1
- package/dist/components/input-phone/input-phone.d.ts +3 -3
- package/dist/components/input-phone/input-phone.js +16 -16
- package/dist/components/menu-item/menu-item.js +3 -3
- package/dist/components/option/option.js +5 -5
- package/dist/components/progress-bar/progress-bar.js +2 -2
- package/dist/components/radio/radio.js +3 -3
- package/dist/components/radio-button/radio-button.js +3 -3
- package/dist/components/radio-button/radio-button.styles.js +2 -2
- package/dist/components/radio-group/radio-group.js +1 -1
- package/dist/components/relative-time/relative-time.js +2 -2
- package/dist/components/select/select.js +8 -8
- package/dist/components/spinner/spinner.js +2 -2
- package/dist/components/step/step.js +5 -5
- package/dist/components/tab/tab.js +2 -2
- package/dist/components/tab-group/tab-group.js +2 -2
- package/dist/components/tag/tag.js +6 -6
- package/dist/components/textarea/textarea.js +3 -3
- package/dist/components/tooltip/tooltip.js +2 -2
- package/dist/components/tree/tree.js +11 -11
- package/dist/components/tree-item/tree-item.js +10 -10
- package/dist/custom-elements.json +430 -94
- package/dist/design-system.d.ts +1 -0
- package/dist/design-system.js +103 -97
- package/dist/themes/dsa-wc-theme.css +3 -0
- package/dist/themes/dsa-wc-theme.min.css +1 -1
- package/dist/themes/dsa-wc-theme.styles.js +3 -0
- package/dist/translations/en-gb.js +1 -1
- package/dist/translations/en.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/utilities/debounce.d.ts +1 -0
- package/dist/utilities/debounce.js +7 -0
- package/dist/utilities/localize.d.ts +2 -0
- package/dist/utilities/localize.js +1 -1
- package/dist/vscode.html-custom-data.json +74 -17
- package/dist/web-types.json +247 -53
- package/package.json +4 -5
- package/dist/chunks/{chunk.ZW4JE66G.js → chunk.AO3M5GSN.js} +3 -3
- package/dist/chunks/{chunk.GP5Z27QB.js → chunk.F6FCZQ67.js} +5 -5
- package/dist/chunks/{chunk.EDRQ2QWB.js → chunk.N3ADQCT7.js} +3 -3
- package/dist/chunks/{chunk.2R6P5TGQ.js → chunk.PEAFJZ6C.js} +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @ds-autonomie/web-components
|
|
2
2
|
|
|
3
|
+
## 1.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- be8eaf7: `input-phone`,`input-mask`: ajout d'un nouvel attribut 'mask' qui spécifie les caractères autorisés qui peuvent être présents à des positions spécifiques dans une séquence.
|
|
8
|
+
- 994505d: `input-mask`, `input-phone`: refactorisation de la validation des composants input-mask et input-phone
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- a885c7a: `combobox`: mise à jour graphique des tags sur le composant combobox
|
|
13
|
+
- 0d8788d: `tag`: documentation sur l'utilisation d'un lien avec le composant tag
|
|
14
|
+
- 0a16775: `button`: mise à jour du style en enlevant la bordure lorsque le composant button a pour variant 'tertiary'
|
|
15
|
+
|
|
16
|
+
## 1.3.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- 24922c0: `badge`: suppression de l'attribut `dot` sur le composant badge
|
|
21
|
+
- 1830489: `combobox`: ajout de l'attribut `onSearch` permettant la recherche asynchrone
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- 24922c0: `tag`: changement de la valeur par défaut du variant sur le composant tag
|
|
26
|
+
- f6b74f4: `breadcrumb`, `breadcrumb-item`: mise en conformité d'accessibilité
|
|
27
|
+
- c2bdab5: `radio-button`: l'icône check a été retiré
|
|
28
|
+
- 07b353b: `combobox`: Résolution des bugs concernant l'utilisation de l'attribut 'items' sur le composant combobox
|
|
29
|
+
|
|
3
30
|
## 1.2.0
|
|
4
31
|
|
|
5
32
|
### Minor Changes
|
|
@@ -245,27 +245,23 @@ var button_styles_default = css`
|
|
|
245
245
|
/* Tertiary/On Base */
|
|
246
246
|
.button--on-base.button--tertiary {
|
|
247
247
|
background-color: var(--dsa-wc-button-tertiary-on-base-color);
|
|
248
|
-
border
|
|
248
|
+
border: none;
|
|
249
249
|
color: var(--dsa-wc-button-tertiary-on-base-font-color);
|
|
250
250
|
}
|
|
251
251
|
.button--on-base.button--tertiary:hover:not(.button--disabled) {
|
|
252
252
|
background-color: var(--dsa-wc-button-tertiary-on-base-hover-color);
|
|
253
|
-
border-color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
|
|
254
253
|
color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
|
|
255
254
|
}
|
|
256
255
|
.button--on-base.button--tertiary:active:not(.button--disabled) {
|
|
257
256
|
background-color: var(--dsa-wc-button-tertiary-on-base-active-color);
|
|
258
|
-
border-color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
|
|
259
257
|
color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
|
|
260
258
|
}
|
|
261
259
|
.button--on-base.button--tertiary.button--disabled {
|
|
262
260
|
background-color: var(--dsa-wc-button-tertiary-on-base-disabled-color);
|
|
263
|
-
border-color: var(--dsa-wc-button-tertiary-on-base-disabled-font-color);
|
|
264
261
|
color: var(--dsa-wc-button-tertiary-on-base-disabled-font-color);
|
|
265
262
|
}
|
|
266
263
|
.button--on-base.button--tertiary.button--loading {
|
|
267
264
|
background-color: var(--dsa-wc-button-tertiary-on-base-loading-color);
|
|
268
|
-
border-color: var(--dsa-wc-button-tertiary-on-base-loading-font-color);
|
|
269
265
|
color: var(--dsa-wc-button-tertiary-on-base-loading-font-color);
|
|
270
266
|
}
|
|
271
267
|
.button--on-base.button--tertiary.button--loading dsa-spinner {
|
|
@@ -279,43 +275,31 @@ var button_styles_default = css`
|
|
|
279
275
|
/* Tertiary/On Floating Menu */
|
|
280
276
|
.button--on-floating-menu.button--tertiary {
|
|
281
277
|
background-color: var(--dsa-wc-button-tertiary-on-floating-menu-color);
|
|
282
|
-
border
|
|
278
|
+
border: none;
|
|
283
279
|
color: var(--dsa-wc-button-tertiary-on-floating-menu-font-color);
|
|
284
280
|
}
|
|
285
281
|
.button--on-floating-menu.button--tertiary:hover:not(.button--disabled) {
|
|
286
282
|
background-color: var(
|
|
287
283
|
--dsa-wc-button-tertiary-on-floating-menu-hover-color
|
|
288
284
|
);
|
|
289
|
-
border-color: var(
|
|
290
|
-
--dsa-wc-button-tertiary-on-floating-menu-hover-font-color
|
|
291
|
-
);
|
|
292
285
|
color: var(--dsa-wc-button-tertiary-on-floating-menu-hover-font-color);
|
|
293
286
|
}
|
|
294
287
|
.button--on-floating-menu.button--tertiary:active:not(.button--disabled) {
|
|
295
288
|
background-color: var(
|
|
296
289
|
--dsa-wc-button-tertiary-on-floating-menu-active-color
|
|
297
290
|
);
|
|
298
|
-
border-color: var(
|
|
299
|
-
--dsa-wc-button-tertiary-on-floating-menu-active-font-color
|
|
300
|
-
);
|
|
301
291
|
color: var(--dsa-wc-button-tertiary-on-floating-menu-active-font-color);
|
|
302
292
|
}
|
|
303
293
|
.button--on-floating-menu.button--tertiary.button--disabled {
|
|
304
294
|
background-color: var(
|
|
305
295
|
--dsa-wc-button-tertiary-on-floating-menu-disabled-color
|
|
306
296
|
);
|
|
307
|
-
border-color: var(
|
|
308
|
-
--dsa-wc-button-tertiary-on-floating-menu-disabled-font-color
|
|
309
|
-
);
|
|
310
297
|
color: var(--dsa-wc-button-tertiary-on-floating-menu-disabled-font-color);
|
|
311
298
|
}
|
|
312
299
|
.button--on-floating-menu.button--tertiary.button--loading {
|
|
313
300
|
background-color: var(
|
|
314
301
|
--dsa-wc-button-tertiary-on-floating-menu-loading-color
|
|
315
302
|
);
|
|
316
|
-
border-color: var(
|
|
317
|
-
--dsa-wc-button-tertiary-on-floating-menu-loading-font-color
|
|
318
|
-
);
|
|
319
303
|
color: var(--dsa-wc-button-tertiary-on-floating-menu-loading-font-color);
|
|
320
304
|
}
|
|
321
305
|
.button--on-floating-menu.button--tertiary.button--loading dsa-spinner {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import {
|
|
2
|
+
input_styles_default
|
|
3
|
+
} from "./chunk.MTZZV3NB.js";
|
|
1
4
|
import {
|
|
2
5
|
getOverridenIconDetails,
|
|
3
6
|
isPrefixIconOverriden
|
|
4
7
|
} from "./chunk.KBT2EKLF.js";
|
|
5
|
-
import {
|
|
6
|
-
input_styles_default
|
|
7
|
-
} from "./chunk.MTZZV3NB.js";
|
|
8
8
|
import {
|
|
9
9
|
defaultValue
|
|
10
10
|
} from "./chunk.CMJ2SRTL.js";
|
|
@@ -14,15 +14,15 @@ import {
|
|
|
14
14
|
import {
|
|
15
15
|
HasSlotController
|
|
16
16
|
} from "./chunk.YIY5RM53.js";
|
|
17
|
-
import {
|
|
18
|
-
ifDefinedAndNotEmpty
|
|
19
|
-
} from "./chunk.ZQJVCRB2.js";
|
|
20
17
|
import {
|
|
21
18
|
LocalizeController
|
|
22
|
-
} from "./chunk.
|
|
19
|
+
} from "./chunk.7BYKP4SA.js";
|
|
23
20
|
import {
|
|
24
21
|
watch
|
|
25
22
|
} from "./chunk.6IH66JBY.js";
|
|
23
|
+
import {
|
|
24
|
+
ifDefinedAndNotEmpty
|
|
25
|
+
} from "./chunk.ZQJVCRB2.js";
|
|
26
26
|
import {
|
|
27
27
|
ShoelaceElement
|
|
28
28
|
} from "./chunk.YCXTCVAZ.js";
|
|
@@ -2,9 +2,10 @@ import {
|
|
|
2
2
|
input_mask_styles_default
|
|
3
3
|
} from "./chunk.2HV2U4RQ.js";
|
|
4
4
|
import {
|
|
5
|
-
|
|
5
|
+
maskedValueToRawValue,
|
|
6
|
+
rawValueToMaskedValue,
|
|
6
7
|
stripSpecialChars
|
|
7
|
-
} from "./chunk.
|
|
8
|
+
} from "./chunk.7OLEA3GQ.js";
|
|
8
9
|
import {
|
|
9
10
|
defaultValue
|
|
10
11
|
} from "./chunk.CMJ2SRTL.js";
|
|
@@ -14,15 +15,15 @@ import {
|
|
|
14
15
|
import {
|
|
15
16
|
HasSlotController
|
|
16
17
|
} from "./chunk.YIY5RM53.js";
|
|
17
|
-
import {
|
|
18
|
-
ifDefinedAndNotEmpty
|
|
19
|
-
} from "./chunk.ZQJVCRB2.js";
|
|
20
18
|
import {
|
|
21
19
|
LocalizeController
|
|
22
|
-
} from "./chunk.
|
|
20
|
+
} from "./chunk.7BYKP4SA.js";
|
|
23
21
|
import {
|
|
24
22
|
watch
|
|
25
23
|
} from "./chunk.6IH66JBY.js";
|
|
24
|
+
import {
|
|
25
|
+
ifDefinedAndNotEmpty
|
|
26
|
+
} from "./chunk.ZQJVCRB2.js";
|
|
26
27
|
import {
|
|
27
28
|
ShoelaceElement
|
|
28
29
|
} from "./chunk.YCXTCVAZ.js";
|
|
@@ -50,6 +51,7 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
50
51
|
);
|
|
51
52
|
this.localize = new LocalizeController(this);
|
|
52
53
|
this.hasFocus = false;
|
|
54
|
+
this.maskedValue = "";
|
|
53
55
|
this.title = "";
|
|
54
56
|
this.name = "";
|
|
55
57
|
this.value = "";
|
|
@@ -62,38 +64,35 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
62
64
|
this.disabled = false;
|
|
63
65
|
this.placeholder = "";
|
|
64
66
|
this.readonly = false;
|
|
65
|
-
this.validate = false;
|
|
66
67
|
this.error = false;
|
|
67
68
|
this.errorMessage = "";
|
|
68
69
|
this.form = "";
|
|
69
70
|
this.required = false;
|
|
71
|
+
this.pattern = "";
|
|
72
|
+
this.mask = "";
|
|
70
73
|
}
|
|
71
74
|
/** Gets the validity state object */
|
|
72
75
|
get validity() {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
} else {
|
|
79
|
-
this.error = false;
|
|
80
|
-
}
|
|
81
|
-
const validityState = {
|
|
82
|
-
badInput: false,
|
|
83
|
-
customError: false,
|
|
84
|
-
patternMismatch: this.error,
|
|
85
|
-
rangeOverflow: false,
|
|
86
|
-
rangeUnderflow: false,
|
|
87
|
-
stepMismatch: false,
|
|
88
|
-
tooLong: false,
|
|
89
|
-
tooShort: false,
|
|
90
|
-
typeMismatch: false,
|
|
91
|
-
valid: !this.error,
|
|
92
|
-
valueMissing: false
|
|
93
|
-
};
|
|
94
|
-
return validityState;
|
|
76
|
+
let patternMatch = void 0;
|
|
77
|
+
if (this.value.length > 0 && this.pattern.length > 0) {
|
|
78
|
+
const strippedValue = stripSpecialChars(this.value);
|
|
79
|
+
const matches = strippedValue.match(this.pattern);
|
|
80
|
+
patternMatch = matches !== null;
|
|
95
81
|
}
|
|
96
|
-
|
|
82
|
+
const validityState = {
|
|
83
|
+
badInput: this.input.validity.badInput,
|
|
84
|
+
customError: this.input.validity.customError,
|
|
85
|
+
patternMismatch: !patternMatch,
|
|
86
|
+
rangeOverflow: this.input.validity.rangeOverflow,
|
|
87
|
+
rangeUnderflow: this.input.validity.rangeUnderflow,
|
|
88
|
+
stepMismatch: this.input.validity.stepMismatch,
|
|
89
|
+
tooLong: this.input.validity.tooLong,
|
|
90
|
+
tooShort: this.input.validity.tooShort,
|
|
91
|
+
typeMismatch: this.input.validity.typeMismatch,
|
|
92
|
+
valid: patternMatch !== void 0 ? patternMatch : this.input.validity.valid,
|
|
93
|
+
valueMissing: this.input.validity.valueMissing
|
|
94
|
+
};
|
|
95
|
+
return validityState;
|
|
97
96
|
}
|
|
98
97
|
/** Gets the validation message */
|
|
99
98
|
get validationMessage() {
|
|
@@ -102,17 +101,34 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
102
101
|
firstUpdated() {
|
|
103
102
|
this.formControlController.updateValidity();
|
|
104
103
|
}
|
|
104
|
+
connectedCallback() {
|
|
105
|
+
super.connectedCallback();
|
|
106
|
+
if (this.mask.length > 0 && this.mask.length !== this.placeholder.length) {
|
|
107
|
+
console.warn(
|
|
108
|
+
"For correct usage: add `mask` attribute. It should have the same format than the placeholder."
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
this.maskedValue = this.rawValueToMaskedValue(this.value);
|
|
112
|
+
}
|
|
113
|
+
handleDocumentKeyUp() {
|
|
114
|
+
const strippedValue = stripSpecialChars(this.input.value);
|
|
115
|
+
const newValue = maskedValueToRawValue(
|
|
116
|
+
strippedValue,
|
|
117
|
+
this.mask.length > 0 ? this.mask : this.placeholder
|
|
118
|
+
);
|
|
119
|
+
const maskedValue = this.rawValueToMaskedValue(newValue);
|
|
120
|
+
this.value = newValue;
|
|
121
|
+
this.maskedValue = maskedValue;
|
|
122
|
+
this.input.value = maskedValue;
|
|
123
|
+
this.formControlController.updateValidity();
|
|
124
|
+
this.emit("dsa-input");
|
|
125
|
+
}
|
|
105
126
|
handleBlur() {
|
|
106
127
|
this.hasFocus = false;
|
|
107
128
|
this.emit("dsa-blur");
|
|
108
129
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
this.value = strippedValue;
|
|
112
|
-
this.emit("dsa-change");
|
|
113
|
-
}
|
|
114
|
-
getMaskedValue(inputValue) {
|
|
115
|
-
return getMaskedValue(inputValue, this.placeholder);
|
|
130
|
+
rawValueToMaskedValue(inputValue) {
|
|
131
|
+
return rawValueToMaskedValue(inputValue, this.placeholder);
|
|
116
132
|
}
|
|
117
133
|
handleClearClick(event) {
|
|
118
134
|
this.value = "";
|
|
@@ -126,11 +142,9 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
126
142
|
this.hasFocus = true;
|
|
127
143
|
this.emit("dsa-focus");
|
|
128
144
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
this.
|
|
132
|
-
this.formControlController.updateValidity();
|
|
133
|
-
this.emit("dsa-input");
|
|
145
|
+
handleChange() {
|
|
146
|
+
this.value = this.input.value;
|
|
147
|
+
this.emit("dsa-change");
|
|
134
148
|
}
|
|
135
149
|
handleInvalid(event) {
|
|
136
150
|
this.formControlController.setValidity(false);
|
|
@@ -201,11 +215,7 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
201
215
|
}
|
|
202
216
|
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
|
203
217
|
setCustomValidity(message) {
|
|
204
|
-
|
|
205
|
-
this.input.setCustomValidity(this.error ? this.errorMessage : "");
|
|
206
|
-
} else {
|
|
207
|
-
this.input.setCustomValidity(message);
|
|
208
|
-
}
|
|
218
|
+
this.input.setCustomValidity(message);
|
|
209
219
|
this.formControlController.updateValidity();
|
|
210
220
|
}
|
|
211
221
|
render() {
|
|
@@ -215,8 +225,7 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
215
225
|
const hasLabel = this.label ? true : !!hasLabelSlot;
|
|
216
226
|
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
|
|
217
227
|
const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
|
|
218
|
-
const
|
|
219
|
-
const placeholder = this.placeholder.substring(maskedValue.length);
|
|
228
|
+
const placeholder = this.placeholder.substring(this.maskedValue.length);
|
|
220
229
|
return html`
|
|
221
230
|
<div
|
|
222
231
|
part="form-control"
|
|
@@ -268,7 +277,7 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
268
277
|
"input-mask__placeholder": true
|
|
269
278
|
})} aria-placeholder=${placeholder} aria-hidden="true"
|
|
270
279
|
>
|
|
271
|
-
<span class="input-mask__value" aria-hidden="true">${maskedValue}</span>
|
|
280
|
+
<span class="input-mask__value" aria-hidden="true">${this.maskedValue}</span>
|
|
272
281
|
${placeholder}</div
|
|
273
282
|
>
|
|
274
283
|
|
|
@@ -288,9 +297,8 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
288
297
|
minlength=${ifDefined(this.minlength)}
|
|
289
298
|
maxlength=${ifDefined(this.placeholder.length)}
|
|
290
299
|
size=${ifDefined(this.placeholder.length)}
|
|
291
|
-
pattern=${ifDefined(this.pattern)}
|
|
292
300
|
placeholder=${ifDefined(this.placeholder)}
|
|
293
|
-
.value=${live(maskedValue)}
|
|
301
|
+
.value=${live(this.maskedValue)}
|
|
294
302
|
autocomplete=${ifDefined(this.autocomplete)}
|
|
295
303
|
autocorrect=${ifDefined(this.autocorrect)}
|
|
296
304
|
?autofocus=${this.autofocus}
|
|
@@ -302,8 +310,8 @@ var DSAInputMask = class extends ShoelaceElement {
|
|
|
302
310
|
)}
|
|
303
311
|
aria-describedby=${this.error ? "input-mask error-text help-text" : "input-mask help-text"}
|
|
304
312
|
@change=${this.handleChange}
|
|
305
|
-
@input=${this.handleInput}
|
|
306
313
|
@invalid=${this.handleInvalid}
|
|
314
|
+
@keyup=${this.handleDocumentKeyUp}
|
|
307
315
|
@keydown=${this.handleKeyDown}
|
|
308
316
|
@focus=${this.handleFocus}
|
|
309
317
|
@blur=${this.handleBlur}
|
|
@@ -355,6 +363,9 @@ __decorateClass([
|
|
|
355
363
|
__decorateClass([
|
|
356
364
|
state()
|
|
357
365
|
], DSAInputMask.prototype, "hasFocus", 2);
|
|
366
|
+
__decorateClass([
|
|
367
|
+
state()
|
|
368
|
+
], DSAInputMask.prototype, "maskedValue", 2);
|
|
358
369
|
__decorateClass([
|
|
359
370
|
property()
|
|
360
371
|
], DSAInputMask.prototype, "title", 2);
|
|
@@ -392,10 +403,7 @@ __decorateClass([
|
|
|
392
403
|
property({ type: Boolean, reflect: true })
|
|
393
404
|
], DSAInputMask.prototype, "readonly", 2);
|
|
394
405
|
__decorateClass([
|
|
395
|
-
property({ type: Boolean
|
|
396
|
-
], DSAInputMask.prototype, "validate", 2);
|
|
397
|
-
__decorateClass([
|
|
398
|
-
property({ type: Boolean, reflect: true })
|
|
406
|
+
property({ type: Boolean })
|
|
399
407
|
], DSAInputMask.prototype, "error", 2);
|
|
400
408
|
__decorateClass([
|
|
401
409
|
property({ attribute: "error-message" })
|
|
@@ -427,6 +435,9 @@ __decorateClass([
|
|
|
427
435
|
__decorateClass([
|
|
428
436
|
property()
|
|
429
437
|
], DSAInputMask.prototype, "enterkeyhint", 2);
|
|
438
|
+
__decorateClass([
|
|
439
|
+
property({ reflect: true })
|
|
440
|
+
], DSAInputMask.prototype, "mask", 2);
|
|
430
441
|
__decorateClass([
|
|
431
442
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
432
443
|
], DSAInputMask.prototype, "handleDisabledChange", 1);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
badge_styles_default
|
|
3
|
-
} from "./chunk.
|
|
3
|
+
} from "./chunk.IFXLU6P3.js";
|
|
4
4
|
import {
|
|
5
5
|
ShoelaceElement
|
|
6
6
|
} from "./chunk.YCXTCVAZ.js";
|
|
@@ -16,7 +16,6 @@ var DSABadge = class extends ShoelaceElement {
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.variant = "primary";
|
|
19
|
-
this.dot = false;
|
|
20
19
|
this.pulse = false;
|
|
21
20
|
}
|
|
22
21
|
render() {
|
|
@@ -30,12 +29,11 @@ var DSABadge = class extends ShoelaceElement {
|
|
|
30
29
|
"badge--neutral": this.variant === "neutral",
|
|
31
30
|
"badge--warning": this.variant === "warning",
|
|
32
31
|
"badge--danger": this.variant === "danger",
|
|
33
|
-
"badge--dot": this.dot,
|
|
34
32
|
"badge--pulse": this.pulse
|
|
35
33
|
})}
|
|
36
34
|
role="status"
|
|
37
35
|
>
|
|
38
|
-
<slot
|
|
36
|
+
<slot></slot>
|
|
39
37
|
</div>
|
|
40
38
|
`;
|
|
41
39
|
}
|
|
@@ -44,9 +42,6 @@ DSABadge.styles = badge_styles_default;
|
|
|
44
42
|
__decorateClass([
|
|
45
43
|
property({ reflect: true })
|
|
46
44
|
], DSABadge.prototype, "variant", 2);
|
|
47
|
-
__decorateClass([
|
|
48
|
-
property({ type: Boolean, reflect: true })
|
|
49
|
-
], DSABadge.prototype, "dot", 2);
|
|
50
45
|
__decorateClass([
|
|
51
46
|
property({ type: Boolean, reflect: true })
|
|
52
47
|
], DSABadge.prototype, "pulse", 2);
|
|
@@ -11,13 +11,13 @@ import {
|
|
|
11
11
|
} from "./chunk.V7RJROLH.js";
|
|
12
12
|
import {
|
|
13
13
|
LocalizeController
|
|
14
|
-
} from "./chunk.
|
|
15
|
-
import {
|
|
16
|
-
alert_styles_default
|
|
17
|
-
} from "./chunk.Z6TBD2AC.js";
|
|
14
|
+
} from "./chunk.7BYKP4SA.js";
|
|
18
15
|
import {
|
|
19
16
|
watch
|
|
20
17
|
} from "./chunk.6IH66JBY.js";
|
|
18
|
+
import {
|
|
19
|
+
alert_styles_default
|
|
20
|
+
} from "./chunk.Z6TBD2AC.js";
|
|
21
21
|
import {
|
|
22
22
|
ShoelaceElement
|
|
23
23
|
} from "./chunk.YCXTCVAZ.js";
|
|
@@ -36,6 +36,8 @@ var translation = {
|
|
|
36
36
|
slideNum: (slide) => `Diapositive ${slide}`,
|
|
37
37
|
toggleColorFormat: "Changer le format de couleur",
|
|
38
38
|
noMatchFound: "Aucune correspondance trouv\xE9e",
|
|
39
|
+
optionsLoading: "Chargement des options",
|
|
40
|
+
optionsError: "Une erreur est survenue",
|
|
39
41
|
step: "\xC9tape",
|
|
40
42
|
stepActive: "\xC9tape active",
|
|
41
43
|
stepCompleted: "\xC9tape valid\xE9e",
|
|
@@ -91,6 +93,8 @@ var translation2 = {
|
|
|
91
93
|
slideNum: (slide) => `Slide ${slide}`,
|
|
92
94
|
toggleColorFormat: "Toggle color format",
|
|
93
95
|
noMatchFound: "No match found",
|
|
96
|
+
optionsLoading: "Options loading",
|
|
97
|
+
optionsError: "An error has occurred",
|
|
94
98
|
step: "Step",
|
|
95
99
|
stepActive: "Active step",
|
|
96
100
|
stepCompleted: "Step completed",
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
// src/components/input-mask/input-mask.utils.ts
|
|
2
|
-
var specialCharPattern = /[
|
|
2
|
+
var specialCharPattern = /[^a-zA-Z0-9#?_]+/g;
|
|
3
3
|
var normalCharPattern = /^[_A-z0-9]*((-)*[_A-z0-9])*$/;
|
|
4
|
+
var maskOptions = {
|
|
5
|
+
allChar: "_",
|
|
6
|
+
numericChar: "#dDmMyYaA09",
|
|
7
|
+
alphaChar: "?LaA"
|
|
8
|
+
};
|
|
9
|
+
function keepMaskChars(word) {
|
|
10
|
+
return word.replace(/[^_#dDmMyYaA09?L]+/g, "");
|
|
11
|
+
}
|
|
4
12
|
function stripSpecialChars(word) {
|
|
5
13
|
return word.replace(specialCharPattern, "");
|
|
6
14
|
}
|
|
7
15
|
function isSpecialChar(word) {
|
|
8
16
|
return word.match(specialCharPattern) !== null;
|
|
9
17
|
}
|
|
10
|
-
function
|
|
18
|
+
function rawValueToMaskedValue(rawValue, mask) {
|
|
11
19
|
const explodedValue = [...rawValue];
|
|
12
20
|
const explodedMask = [...mask];
|
|
13
21
|
let valueIndex = 0;
|
|
@@ -30,6 +38,26 @@ function getMaskedValue(rawValue, mask) {
|
|
|
30
38
|
});
|
|
31
39
|
return maskedValue;
|
|
32
40
|
}
|
|
41
|
+
var BASE_RADIX = 10;
|
|
42
|
+
function maskedValueToRawValue(value, mask) {
|
|
43
|
+
let rawValue = "";
|
|
44
|
+
const maskControl = keepMaskChars(mask);
|
|
45
|
+
for (let maskIndex = 0, valueIndex = 0; maskIndex < maskControl.length; ++maskIndex) {
|
|
46
|
+
if (value[valueIndex] === void 0) {
|
|
47
|
+
return rawValue;
|
|
48
|
+
}
|
|
49
|
+
const valueCharMatchesMaskAny = maskOptions.allChar.indexOf(maskControl[maskIndex]) >= 0;
|
|
50
|
+
const valueCharMatchesMaskNumber = isFinite(parseInt(value[valueIndex], BASE_RADIX)) && maskOptions.numericChar.indexOf(maskControl[maskIndex]) >= 0;
|
|
51
|
+
const valueCharMatchesMaskLetter = value[valueIndex].match(/[A-Z]/i) && maskOptions.alphaChar.indexOf(maskControl[maskIndex]) >= 0;
|
|
52
|
+
if (valueCharMatchesMaskAny || valueCharMatchesMaskLetter || valueCharMatchesMaskNumber) {
|
|
53
|
+
rawValue += value[valueIndex];
|
|
54
|
+
++valueIndex;
|
|
55
|
+
} else {
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return rawValue;
|
|
60
|
+
}
|
|
33
61
|
var IBANTestValues = [
|
|
34
62
|
"AD1400080001001234567890",
|
|
35
63
|
"AT483200000012345864",
|
|
@@ -199,8 +227,10 @@ var NIRTestValues = ["187089932132113"];
|
|
|
199
227
|
export {
|
|
200
228
|
specialCharPattern,
|
|
201
229
|
normalCharPattern,
|
|
230
|
+
maskOptions,
|
|
202
231
|
stripSpecialChars,
|
|
203
|
-
|
|
232
|
+
rawValueToMaskedValue,
|
|
233
|
+
maskedValueToRawValue,
|
|
204
234
|
IBANTestValues,
|
|
205
235
|
BICTestValues,
|
|
206
236
|
NIRTestValues
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
radio_button_styles_default
|
|
3
|
-
} from "./chunk.
|
|
3
|
+
} from "./chunk.C7CCBBLF.js";
|
|
4
4
|
import {
|
|
5
5
|
HasSlotController
|
|
6
6
|
} from "./chunk.YIY5RM53.js";
|
|
@@ -96,10 +96,6 @@ var DSARadioButton = class extends ShoelaceElement {
|
|
|
96
96
|
class="button__icon-readonly"
|
|
97
97
|
></dsa-icon>` : ""}
|
|
98
98
|
<slot part="label" class="button__label"></slot>
|
|
99
|
-
${this.checked ? html`<dsa-icon
|
|
100
|
-
name="check"
|
|
101
|
-
class="button__icon-check"
|
|
102
|
-
></dsa-icon>` : ""}
|
|
103
99
|
</button>
|
|
104
100
|
</div>
|
|
105
101
|
`;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
button_styles_default
|
|
3
|
-
} from "./chunk.
|
|
3
|
+
} from "./chunk.3GJ3KGGY.js";
|
|
4
4
|
|
|
5
5
|
// src/components/radio-button/radio-button.styles.ts
|
|
6
6
|
import { css } from "lit";
|
|
@@ -71,9 +71,6 @@ var radio_button_styles_default = css`
|
|
|
71
71
|
border-color: var(--dsa-wc-toggle-button-read-only-checked-border-color);
|
|
72
72
|
color: var(--dsa-wc-toggle-button-read-only-checked-color);
|
|
73
73
|
}
|
|
74
|
-
.button--toggle.button--checked.button--readonly.button__icon-check {
|
|
75
|
-
color: var(--dsa-wc-toggle-button-read-only-checked-icon-color);
|
|
76
|
-
}
|
|
77
74
|
|
|
78
75
|
.button--toggle.button--disabled {
|
|
79
76
|
background-color: var(--dsa-wc-toggle-button-disabled-background-color);
|
|
@@ -81,10 +78,6 @@ var radio_button_styles_default = css`
|
|
|
81
78
|
color: var(--dsa-wc-toggle-button-disabled-color);
|
|
82
79
|
}
|
|
83
80
|
|
|
84
|
-
.button--toggle .button__icon-check {
|
|
85
|
-
margin-inline-start: var(--dsa-wc-toggle-button-icon-spacing);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
81
|
.button--toggle .button__icon-readonly {
|
|
89
82
|
margin-inline-end: var(--dsa-wc-toggle-button-icon-spacing);
|
|
90
83
|
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {
|
|
2
|
+
dialog_styles_default
|
|
3
|
+
} from "./chunk.PQWQ42E2.js";
|
|
1
4
|
import {
|
|
2
5
|
Modal
|
|
3
6
|
} from "./chunk.ISAFRNR2.js";
|
|
@@ -5,15 +8,9 @@ import {
|
|
|
5
8
|
lockBodyScrolling,
|
|
6
9
|
unlockBodyScrolling
|
|
7
10
|
} from "./chunk.EMIT7S33.js";
|
|
8
|
-
import {
|
|
9
|
-
dialog_styles_default
|
|
10
|
-
} from "./chunk.PQWQ42E2.js";
|
|
11
11
|
import {
|
|
12
12
|
HasSlotController
|
|
13
13
|
} from "./chunk.YIY5RM53.js";
|
|
14
|
-
import {
|
|
15
|
-
ifDefinedAndNotEmpty
|
|
16
|
-
} from "./chunk.ZQJVCRB2.js";
|
|
17
14
|
import {
|
|
18
15
|
waitForEvent
|
|
19
16
|
} from "./chunk.B4BZKR24.js";
|
|
@@ -27,10 +24,13 @@ import {
|
|
|
27
24
|
} from "./chunk.V7RJROLH.js";
|
|
28
25
|
import {
|
|
29
26
|
LocalizeController
|
|
30
|
-
} from "./chunk.
|
|
27
|
+
} from "./chunk.7BYKP4SA.js";
|
|
31
28
|
import {
|
|
32
29
|
watch
|
|
33
30
|
} from "./chunk.6IH66JBY.js";
|
|
31
|
+
import {
|
|
32
|
+
ifDefinedAndNotEmpty
|
|
33
|
+
} from "./chunk.ZQJVCRB2.js";
|
|
34
34
|
import {
|
|
35
35
|
ShoelaceElement
|
|
36
36
|
} from "./chunk.YCXTCVAZ.js";
|