@ds-autonomie/web-components 1.3.0 → 1.4.0

package/dist/custom-elements.json

@@ -394,6 +394,246 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/anchor-tag/anchor-tag.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DSAAnchorTag",
+          "slots": [
+            {
+              "description": "Used to prepend a presentational icon or similar element to the input.",
+              "name": "prefix"
+            },
+            {
+              "description": "Used to append a presentational icon or similar element to the input.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Makes the tag clickable and acts as a link. Specifies the URL of the page the link goes to.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Determines the relationship between the current document and the linked document",
+              "attribute": "rel"
+            },
+            {
+              "kind": "field",
+              "name": "referrerpolicy",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Specifies which referrer information to send with the link",
+              "attribute": "referrerpolicy"
+            },
+            {
+              "kind": "field",
+              "name": "hreflang",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Specifies the language of the linked document",
+              "attribute": "hreflang"
+            },
+            {
+              "kind": "field",
+              "name": "ping",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Allows a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.",
+              "attribute": "ping"
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Specifies that the target will be downloaded when a user clicks on the hyperlink",
+              "attribute": "download"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Defines the media type of the linked document",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top'"
+              },
+              "default": "'_self'",
+              "description": "Specifies where to open the linked document. Works when tag is clickable.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Makes the tag clickable and acts as a link. Specifies the URL of the page the link goes to.",
+              "fieldName": "href"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Determines the relationship between the current document and the linked document",
+              "fieldName": "rel"
+            },
+            {
+              "name": "referrerpolicy",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Specifies which referrer information to send with the link",
+              "fieldName": "referrerpolicy"
+            },
+            {
+              "name": "hreflang",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Specifies the language of the linked document",
+              "fieldName": "hreflang"
+            },
+            {
+              "name": "ping",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Allows a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.",
+              "fieldName": "ping"
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Specifies that the target will be downloaded when a user clicks on the hyperlink",
+              "fieldName": "download"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Defines the media type of the linked document",
+              "fieldName": "type"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top'"
+              },
+              "default": "'_self'",
+              "description": "Specifies where to open the linked document. Works when tag is clickable.",
+              "fieldName": "target"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element"
+          },
+          "summary": "Anchor tags are used as a hyperlink, which is used to link from one page to another. It mirrors the visual style of a tag, and the functionnality of a standard HTML anchor tag.",
+          "documentation": "undefined",
+          "tagName": "dsa-anchor-tag",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DSAAnchorTag",
+            "module": "components/anchor-tag/anchor-tag.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "dsa-anchor-tag",
+          "declaration": {
+            "name": "DSAAnchorTag",
+            "module": "components/anchor-tag/anchor-tag.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.js",
@@ -7517,7 +7757,7 @@
           "type": {
             "text": "DSAMaskConfig"
           },
-          "default": "{\n  placeholder: '____ ____ ____ ____ ____ ____ ____ ___',\n  pattern:\n    '^(?:((?:IT|SM)\\\\d{2}[A-Z]{1}\\\\d{22})|(NL\\\\d{2}[A-Z]{4}\\\\d{10})|(LV\\\\d{2}[A-Z]{4}\\\\d{13})|((?:BG|GB|IE)\\\\d{2}[A-Z]{4}\\\\d{14})|(GI\\\\d{2}[A-Z]{4}\\\\d{15})|(RO\\\\d{2}[A-Z]{4}\\\\d{16})|(MT\\\\d{2}[A-Z]{4}\\\\d{23})|(NO\\\\d{13})|((?:DK|FI)\\\\d{16})|((?:SI)\\\\d{17})|((?:AT|EE|LU|LT)\\\\d{18})|((?:HR|LI|CH)\\\\d{19})|((?:DE|VA)\\\\d{20})|((?:AD|CZ|ES|MD|SK|SE)\\\\d{22})|(PT\\\\d{23})|((?:IS)\\\\d{24})|((?:BE)\\\\d{14})|((?:FR|MC|GR)\\\\d{25})|((?:PL|HU|CY)\\\\d{26}))$',\n  'help-text': `Indicaficatif pays en 2 lettres majuscules suivi de 10 à 31 charactères numériques`,\n}",
+          "default": "{\n  placeholder: '____ ____ ____ ____ ____ ____ ____ ___',\n  mask: 'LL__ ____ ____ ____ ____ ____ ____ ___',\n  pattern:\n    '^(?:((?:IT|SM)\\\\d{2}[A-Z]{1}\\\\d{22})|(NL\\\\d{2}[A-Z]{4}\\\\d{10})|(LV\\\\d{2}[A-Z]{4}\\\\d{13})|((?:BG|GB|IE)\\\\d{2}[A-Z]{4}\\\\d{14})|(GI\\\\d{2}[A-Z]{4}\\\\d{15})|(RO\\\\d{2}[A-Z]{4}\\\\d{16})|(MT\\\\d{2}[A-Z]{4}\\\\d{23})|(NO\\\\d{13})|((?:DK|FI)\\\\d{16})|((?:SI)\\\\d{17})|((?:AT|EE|LU|LT)\\\\d{18})|((?:HR|LI|CH)\\\\d{19})|((?:DE|VA)\\\\d{20})|((?:AD|CZ|ES|MD|SK|SE)\\\\d{22})|(PT\\\\d{23})|((?:IS)\\\\d{24})|((?:BE)\\\\d{14})|((?:FR|MC|GR)\\\\d{25})|((?:PL|HU|CY)\\\\d{26}))$',\n  'help-text': `Indicatif pays en 2 lettres majuscules suivi de 10 à 31 charactères numériques`,\n}",
           "description": "Input Mask configuration for IBAN from countries within the SEPA area."
         },
         {
@@ -7535,7 +7775,7 @@
           "type": {
             "text": "DSAMaskConfig"
           },
-          "default": "{\n  placeholder: '_ __ __ __ ___ ___ __',\n  pattern: `[12][0-9]{2}(0[1-9]|1[0-2])(2[AB]|[0-9]{2})[0-9]{3}[0-9]{3}([0-9]{2})`,\n  'help-text': '15 charactères',\n}",
+          "default": "{\n  placeholder: '_ __ __ __ ___ ___ __',\n  mask: '# ## ## ## ### ### ##',\n  pattern: `[12][0-9]{2}(0[1-9]|1[0-2])(2[AB]|[0-9]{2})[0-9]{3}[0-9]{3}([0-9]{2})`,\n  'help-text': '15 charactères',\n}",
           "description": "Input Mask configuration for NIR"
         }
       ],
@@ -7630,6 +7870,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "maskedValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "title",
@@ -7739,7 +7988,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Placeholder text to show as a hint when the input is empty. It is also used as a template to mask the value. Alphanumeric values represent the inputed characters.",
+              "description": "Placeholder text to show as a hint. You can use it as a template to mask the value.\nIf it is only use as a guidance on what information is expected, use `mask` attribute to define a specific format to mask the value.",
               "attribute": "placeholder"
             },
             {
@@ -7753,17 +8002,6 @@
               "attribute": "readonly",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "validate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Will check the enterred value against the passed pattern",
-              "attribute": "validate",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "error",
@@ -7772,8 +8010,7 @@
               },
               "default": "false",
               "description": "Indicates whether the input should be in error state",
-              "attribute": "error",
-              "reflects": true
+              "attribute": "error"
             },
             {
               "kind": "field",
@@ -7822,6 +8059,7 @@
               "type": {
                 "text": "string"
               },
+              "default": "''",
               "description": "A regular expression pattern to validate input against.",
               "attribute": "pattern"
             },
@@ -7870,6 +8108,17 @@
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "attribute": "enterkeyhint"
             },
+            {
+              "kind": "field",
+              "name": "mask",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Used to define the allowed or expected characters within a string or data input. It specifies the permissible characters that can be present at specific positions within a sequence.\nIt should follow the format defined by the placeholder, but with its own permissible characters.\n\n- all characters: includes any character, whether it's a letter, number.\n```ts\n'_'\n```\n- numeric characters: specifies numeric values that can be included.\n```ts\n'#dDmMyYaA09'\n```\n- letter characters: denotes alphabetic characters allowed in the sequence.\n```ts\n'?LaA'\n```\n\n- example including only numeric values\n```html\n<dsa-input-mask placeholder=\"dd/mm/yy\" mask=\"##/##/##\" />\n```",
+              "attribute": "mask",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "validity",
@@ -7884,17 +8133,17 @@
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "handleDocumentKeyUp",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "handleBlur",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getMaskedValue",
+              "name": "rawValueToMaskedValue",
               "privacy": "private",
               "parameters": [
                 {
@@ -7925,7 +8174,7 @@
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleChange",
               "privacy": "private"
             },
             {
@@ -8198,7 +8447,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Placeholder text to show as a hint when the input is empty. It is also used as a template to mask the value. Alphanumeric values represent the inputed characters.",
+              "description": "Placeholder text to show as a hint. You can use it as a template to mask the value.\nIf it is only use as a guidance on what information is expected, use `mask` attribute to define a specific format to mask the value.",
               "fieldName": "placeholder"
             },
             {
@@ -8210,15 +8459,6 @@
               "description": "Makes the input readonly.",
               "fieldName": "readonly"
             },
-            {
-              "name": "validate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Will check the enterred value against the passed pattern",
-              "fieldName": "validate"
-            },
             {
               "name": "error",
               "type": {
@@ -8268,6 +8508,7 @@
               "type": {
                 "text": "string"
               },
+              "default": "''",
               "description": "A regular expression pattern to validate input against.",
               "fieldName": "pattern"
             },
@@ -8310,6 +8551,15 @@
               },
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "fieldName": "enterkeyhint"
+            },
+            {
+              "name": "mask",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Used to define the allowed or expected characters within a string or data input. It specifies the permissible characters that can be present at specific positions within a sequence.\nIt should follow the format defined by the placeholder, but with its own permissible characters.\n\n- all characters: includes any character, whether it's a letter, number.\n```ts\n'_'\n```\n- numeric characters: specifies numeric values that can be included.\n```ts\n'#dDmMyYaA09'\n```\n- letter characters: denotes alphabetic characters allowed in the sequence.\n```ts\n'?LaA'\n```\n\n- example including only numeric values\n```html\n<dsa-input-mask placeholder=\"dd/mm/yy\" mask=\"##/##/##\" />\n```",
+              "fieldName": "mask"
             }
           ],
           "superclass": {
@@ -8351,13 +8601,21 @@
         {
           "kind": "variable",
           "name": "specialCharPattern",
-          "default": "/[\\W]+/g"
+          "default": "/[^a-zA-Z0-9#?_]+/g"
         },
         {
           "kind": "variable",
           "name": "normalCharPattern",
           "default": "/^[_A-z0-9]*((-)*[_A-z0-9])*$/"
         },
+        {
+          "kind": "variable",
+          "name": "maskOptions",
+          "type": {
+            "text": "{\n  allChar: '_',\n  numericChar: '#dDmMyYaA09',\n  alphaChar: '?LaA',\n}"
+          },
+          "default": "{\n  allChar: '_',\n  numericChar: '#dDmMyYaA09',\n  alphaChar: '?LaA',\n}"
+        },
         {
           "kind": "function",
           "name": "stripSpecialChars",
@@ -8372,7 +8630,7 @@
         },
         {
           "kind": "function",
-          "name": "getMaskedValue",
+          "name": "rawValueToMaskedValue",
           "parameters": [
             {
               "name": "rawValue",
@@ -8388,6 +8646,24 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "maskedValueToRawValue",
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "mask",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
         {
           "kind": "variable",
           "name": "IBANTestValues",
@@ -8430,6 +8706,14 @@
             "module": "components/input-mask/input-mask.utils.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "maskOptions",
+          "declaration": {
+            "name": "maskOptions",
+            "module": "components/input-mask/input-mask.utils.js"
+          }
+        },
         {
           "kind": "js",
           "name": "stripSpecialChars",
@@ -8440,9 +8724,17 @@
         },
         {
           "kind": "js",
-          "name": "getMaskedValue",
+          "name": "rawValueToMaskedValue",
+          "declaration": {
+            "name": "rawValueToMaskedValue",
+            "module": "components/input-mask/input-mask.utils.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "maskedValueToRawValue",
           "declaration": {
-            "name": "getMaskedValue",
+            "name": "maskedValueToRawValue",
             "module": "components/input-mask/input-mask.utils.js"
           }
         },
@@ -8482,7 +8774,7 @@
           "type": {
             "text": "DSAMaskConfig"
           },
-          "default": "{\n  placeholder: '_ __ __ __ __',\n  pattern: '^((\\\\+)33|(\\\\+)590|(\\\\+)594|(\\\\+)596|(\\\\+)262)[1-9](\\\\d{2}){4}$',\n}",
+          "default": "{\n  placeholder: '_ __ __ __ __',\n  mask: '# ## ## ## ##',\n  pattern: '^((\\\\+)33|(\\\\+)590|(\\\\+)594|(\\\\+)596|(\\\\+)262)[1-9](\\\\d{2}){4}$',\n}",
           "description": "Input Phone configuration for French phone numbers including Dom-Toms"
         }
       ],
@@ -8564,6 +8856,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "maskedNumber",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "title",
@@ -8700,17 +9001,6 @@
               "attribute": "readonly",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "validate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Will check the enterred value against the passed pattern",
-              "attribute": "validate",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "error",
@@ -8719,8 +9009,7 @@
               },
               "default": "false",
               "description": "Indicates whether the input should be in error state",
-              "attribute": "error",
-              "reflects": true
+              "attribute": "error"
             },
             {
               "kind": "field",
@@ -8821,6 +9110,11 @@
               "description": "Gets the validation message",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "handleDocumentKeyUp",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "setPhoneFromValue",
@@ -8873,19 +9167,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "handleKeyDown",
@@ -9182,15 +9463,6 @@
               "description": "Makes the input readonly.",
               "fieldName": "readonly"
             },
-            {
-              "name": "validate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Will check the enterred value against the passed pattern",
-              "fieldName": "validate"
-            },
             {
               "name": "error",
               "type": {
@@ -15969,7 +16241,7 @@
   ],
   "package": {
     "name": "@ds-autonomie/web-components",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "author": "CNSA",
     "license": "MIT"
   }

package/dist/design-system.d.ts

@@ -1,5 +1,6 @@
 export { default as DSAAccordion } from './components/accordion/accordion';
 export { default as DSAAlert } from './components/alert/alert';
+export { default as DSAAnchorTag } from './components/anchor-tag/anchor-tag';
 export { default as DSAAvatar } from './components/avatar/avatar';
 export { default as DSAAvatarGroup } from './components/avatar-group/avatar-group';
 export { default as DSABadge } from './components/badge/badge';