@govtechsg/sgds-web-component 3.19.0 → 3.20.0-rc.1

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 (89) hide show
  1. package/base/select-element.d.ts +2 -0
  2. package/base/select-element.js +12 -0
  3. package/base/select-element.js.map +1 -1
  4. package/components/Alert/alert.js +1 -1
  5. package/components/Alert/index.umd.min.js +1 -1
  6. package/components/Alert/index.umd.min.js.map +1 -1
  7. package/components/ComboBox/index.umd.min.js +4 -4
  8. package/components/ComboBox/index.umd.min.js.map +1 -1
  9. package/components/ComboBox/sgds-combo-box.d.ts +4 -0
  10. package/components/ComboBox/sgds-combo-box.js +9 -0
  11. package/components/ComboBox/sgds-combo-box.js.map +1 -1
  12. package/components/Select/index.umd.min.js +15 -15
  13. package/components/Select/index.umd.min.js.map +1 -1
  14. package/components/Stepper/index.d.ts +2 -0
  15. package/components/Stepper/index.js +2 -0
  16. package/components/Stepper/index.js.map +1 -1
  17. package/components/Stepper/index.umd.min.js +61 -39
  18. package/components/Stepper/index.umd.min.js.map +1 -1
  19. package/components/Stepper/sgds-step.d.ts +40 -0
  20. package/components/Stepper/sgds-step.js +118 -0
  21. package/components/Stepper/sgds-step.js.map +1 -0
  22. package/components/Stepper/sgds-stepper.d.ts +33 -2
  23. package/components/Stepper/sgds-stepper.js +132 -36
  24. package/components/Stepper/sgds-stepper.js.map +1 -1
  25. package/components/Stepper/step.js +6 -0
  26. package/components/Stepper/step.js.map +1 -0
  27. package/components/Stepper/stepper.js +1 -1
  28. package/components/Stepper/types.d.ts +1 -0
  29. package/components/Textarea/index.umd.min.js.map +1 -1
  30. package/components/Textarea/sgds-textarea.d.ts +2 -0
  31. package/components/Textarea/sgds-textarea.js +2 -0
  32. package/components/Textarea/sgds-textarea.js.map +1 -1
  33. package/components/index.d.ts +1 -0
  34. package/components/index.js +1 -0
  35. package/components/index.js.map +1 -1
  36. package/components/index.umd.min.js +90 -68
  37. package/components/index.umd.min.js.map +1 -1
  38. package/css/fouc.css +1 -0
  39. package/custom-elements.json +380 -5
  40. package/index.umd.min.js +185 -163
  41. package/index.umd.min.js.map +1 -1
  42. package/package.json +1 -1
  43. package/react/base/select-element.cjs.js +12 -0
  44. package/react/base/select-element.cjs.js.map +1 -1
  45. package/react/base/select-element.js +12 -0
  46. package/react/base/select-element.js.map +1 -1
  47. package/react/combo-box/index.cjs.js +2 -0
  48. package/react/combo-box/index.cjs.js.map +1 -1
  49. package/react/combo-box/index.js +2 -0
  50. package/react/combo-box/index.js.map +1 -1
  51. package/react/components/Alert/alert.cjs.js +1 -1
  52. package/react/components/Alert/alert.js +1 -1
  53. package/react/components/ComboBox/sgds-combo-box.cjs.js +9 -0
  54. package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
  55. package/react/components/ComboBox/sgds-combo-box.js +9 -0
  56. package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
  57. package/react/components/Stepper/sgds-step.cjs.js +124 -0
  58. package/react/components/Stepper/sgds-step.cjs.js.map +1 -0
  59. package/react/components/Stepper/sgds-step.js +119 -0
  60. package/react/components/Stepper/sgds-step.js.map +1 -0
  61. package/react/components/Stepper/sgds-stepper.cjs.js +130 -34
  62. package/react/components/Stepper/sgds-stepper.cjs.js.map +1 -1
  63. package/react/components/Stepper/sgds-stepper.js +132 -36
  64. package/react/components/Stepper/sgds-stepper.js.map +1 -1
  65. package/react/components/Stepper/step.cjs.js +11 -0
  66. package/react/components/Stepper/step.cjs.js.map +1 -0
  67. package/react/components/Stepper/step.js +7 -0
  68. package/react/components/Stepper/step.js.map +1 -0
  69. package/react/components/Stepper/stepper.cjs.js +1 -1
  70. package/react/components/Stepper/stepper.js +1 -1
  71. package/react/components/Textarea/sgds-textarea.cjs.js +2 -0
  72. package/react/components/Textarea/sgds-textarea.cjs.js.map +1 -1
  73. package/react/components/Textarea/sgds-textarea.js +2 -0
  74. package/react/components/Textarea/sgds-textarea.js.map +1 -1
  75. package/react/index.cjs.js +40 -38
  76. package/react/index.cjs.js.map +1 -1
  77. package/react/index.d.ts +1 -0
  78. package/react/index.js +1 -0
  79. package/react/index.js.map +1 -1
  80. package/react/step/index.cjs.js +40 -0
  81. package/react/step/index.cjs.js.map +1 -0
  82. package/react/step/index.d.ts +4 -0
  83. package/react/step/index.js +16 -0
  84. package/react/step/index.js.map +1 -0
  85. package/react/textarea/index.cjs.js +3 -1
  86. package/react/textarea/index.cjs.js.map +1 -1
  87. package/react/textarea/index.js +3 -1
  88. package/react/textarea/index.js.map +1 -1
  89. package/types/react.d.ts +31 -2
package/css/fouc.css CHANGED
@@ -51,6 +51,7 @@ sgds-sidenav-link:not(:defined),
51
51
  sgds-sidenav:not(:defined),
52
52
  sgds-skeleton:not(:defined),
53
53
  sgds-spinner:not(:defined),
54
+ sgds-step:not(:defined),
54
55
  sgds-stepper:not(:defined),
55
56
  sgds-subnav-item:not(:defined),
56
57
  sgds-subnav:not(:defined),
@@ -4243,6 +4243,17 @@
4243
4243
  "attribute": "clearable",
4244
4244
  "reflects": true
4245
4245
  },
4246
+ {
4247
+ "kind": "field",
4248
+ "name": "noValidate",
4249
+ "type": {
4250
+ "text": "boolean"
4251
+ },
4252
+ "default": "false",
4253
+ "description": "Disables native and sgds validation for the combo box.",
4254
+ "attribute": "noValidate",
4255
+ "reflects": true
4256
+ },
4246
4257
  {
4247
4258
  "kind": "field",
4248
4259
  "name": "async",
@@ -4723,6 +4734,25 @@
4723
4734
  "module": "src/base/select-element.ts"
4724
4735
  }
4725
4736
  },
4737
+ {
4738
+ "kind": "method",
4739
+ "name": "setInvalid",
4740
+ "privacy": "public",
4741
+ "parameters": [
4742
+ {
4743
+ "name": "bool",
4744
+ "type": {
4745
+ "text": "boolean"
4746
+ }
4747
+ }
4748
+ ],
4749
+ "description": "Programatically sets the invalid state of the component. Pass in boolean value in the argument",
4750
+ "type": {},
4751
+ "inheritedFrom": {
4752
+ "name": "SelectElement",
4753
+ "module": "src/base/select-element.ts"
4754
+ }
4755
+ },
4726
4756
  {
4727
4757
  "kind": "field",
4728
4758
  "name": "menuList",
@@ -5320,6 +5350,16 @@
5320
5350
  "name": "sgds-blur",
5321
5351
  "reactName": "onSgdsBlur"
5322
5352
  },
5353
+ {
5354
+ "description": "Emitted when the combo box's invalid state is set to true.",
5355
+ "name": "sgds-invalid",
5356
+ "reactName": "onSgdsInvalid"
5357
+ },
5358
+ {
5359
+ "description": "Emitted when the combo box's invalid state is set to false.",
5360
+ "name": "sgds-valid",
5361
+ "reactName": "onSgdsValid"
5362
+ },
5323
5363
  {
5324
5364
  "description": "Emitted event when show instance is called",
5325
5365
  "name": "sgds-show",
@@ -5385,6 +5425,15 @@
5385
5425
  "description": "If true, a clear button will be enabled on focus",
5386
5426
  "fieldName": "clearable"
5387
5427
  },
5428
+ {
5429
+ "name": "noValidate",
5430
+ "type": {
5431
+ "text": "boolean"
5432
+ },
5433
+ "default": "false",
5434
+ "description": "Disables native and sgds validation for the combo box.",
5435
+ "fieldName": "noValidate"
5436
+ },
5388
5437
  {
5389
5438
  "name": "async",
5390
5439
  "type": {
@@ -16556,6 +16605,25 @@
16556
16605
  "module": "src/base/select-element.ts"
16557
16606
  }
16558
16607
  },
16608
+ {
16609
+ "kind": "method",
16610
+ "name": "setInvalid",
16611
+ "privacy": "public",
16612
+ "parameters": [
16613
+ {
16614
+ "name": "bool",
16615
+ "type": {
16616
+ "text": "boolean"
16617
+ }
16618
+ }
16619
+ ],
16620
+ "description": "Programatically sets the invalid state of the component. Pass in boolean value in the argument",
16621
+ "type": {},
16622
+ "inheritedFrom": {
16623
+ "name": "SelectElement",
16624
+ "module": "src/base/select-element.ts"
16625
+ }
16626
+ },
16559
16627
  {
16560
16628
  "kind": "field",
16561
16629
  "name": "menuList",
@@ -19216,6 +19284,245 @@
19216
19284
  }
19217
19285
  ]
19218
19286
  },
19287
+ {
19288
+ "kind": "javascript-module",
19289
+ "path": "src/components/Stepper/sgds-step.ts",
19290
+ "declarations": [
19291
+ {
19292
+ "kind": "class",
19293
+ "description": "",
19294
+ "name": "SgdsStep",
19295
+ "slots": [
19296
+ {
19297
+ "description": "Additional content to display under the step header",
19298
+ "name": "default"
19299
+ }
19300
+ ],
19301
+ "members": [
19302
+ {
19303
+ "kind": "field",
19304
+ "name": "stepHeader",
19305
+ "type": {
19306
+ "text": "string"
19307
+ },
19308
+ "default": "\"\"",
19309
+ "description": "The header text for the step",
19310
+ "attribute": "stepHeader",
19311
+ "reflects": true
19312
+ },
19313
+ {
19314
+ "kind": "field",
19315
+ "name": "iconName",
19316
+ "type": {
19317
+ "text": "string | undefined"
19318
+ },
19319
+ "description": "Optional icon name to display instead of step number",
19320
+ "attribute": "iconName",
19321
+ "reflects": true
19322
+ },
19323
+ {
19324
+ "kind": "field",
19325
+ "name": "component",
19326
+ "type": {
19327
+ "text": "unknown"
19328
+ },
19329
+ "description": "Optional component to render for this step",
19330
+ "attribute": "component"
19331
+ },
19332
+ {
19333
+ "kind": "field",
19334
+ "name": "clickable",
19335
+ "type": {
19336
+ "text": "boolean"
19337
+ },
19338
+ "default": "false",
19339
+ "description": "Whether this step is clickable",
19340
+ "attribute": "clickable"
19341
+ },
19342
+ {
19343
+ "kind": "field",
19344
+ "name": "active",
19345
+ "type": {
19346
+ "text": "boolean"
19347
+ },
19348
+ "default": "false",
19349
+ "description": "Whether this step is currently active",
19350
+ "attribute": "active",
19351
+ "reflects": true
19352
+ },
19353
+ {
19354
+ "kind": "field",
19355
+ "name": "disabled",
19356
+ "type": {
19357
+ "text": "boolean"
19358
+ },
19359
+ "default": "false",
19360
+ "description": "Whether this step is currently disabled",
19361
+ "attribute": "disabled",
19362
+ "reflects": true
19363
+ },
19364
+ {
19365
+ "kind": "field",
19366
+ "name": "completed",
19367
+ "type": {
19368
+ "text": "boolean"
19369
+ },
19370
+ "default": "false",
19371
+ "description": "Whether this step is completed",
19372
+ "attribute": "completed",
19373
+ "reflects": true
19374
+ },
19375
+ {
19376
+ "kind": "method",
19377
+ "name": "emit",
19378
+ "parameters": [
19379
+ {
19380
+ "name": "name",
19381
+ "type": {
19382
+ "text": "string"
19383
+ }
19384
+ },
19385
+ {
19386
+ "name": "options",
19387
+ "optional": true,
19388
+ "type": {
19389
+ "text": "CustomEventInit<T>"
19390
+ }
19391
+ }
19392
+ ],
19393
+ "description": "Emits a custom event with more convenient defaults.",
19394
+ "type": {},
19395
+ "inheritedFrom": {
19396
+ "name": "SgdsElement",
19397
+ "module": "src/base/sgds-element.ts"
19398
+ }
19399
+ },
19400
+ {
19401
+ "kind": "method",
19402
+ "name": "define",
19403
+ "static": true,
19404
+ "parameters": [
19405
+ {
19406
+ "name": "name",
19407
+ "type": {
19408
+ "text": "string"
19409
+ }
19410
+ },
19411
+ {
19412
+ "name": "elementConstructor",
19413
+ "default": "this"
19414
+ },
19415
+ {
19416
+ "name": "options",
19417
+ "default": "{}",
19418
+ "type": {
19419
+ "text": "ElementDefinitionOptions"
19420
+ }
19421
+ }
19422
+ ],
19423
+ "type": {},
19424
+ "inheritedFrom": {
19425
+ "name": "SgdsElement",
19426
+ "module": "src/base/sgds-element.ts"
19427
+ }
19428
+ }
19429
+ ],
19430
+ "attributes": [
19431
+ {
19432
+ "name": "stepHeader",
19433
+ "type": {
19434
+ "text": "string"
19435
+ },
19436
+ "default": "\"\"",
19437
+ "description": "The header text for the step",
19438
+ "fieldName": "stepHeader"
19439
+ },
19440
+ {
19441
+ "name": "iconName",
19442
+ "type": {
19443
+ "text": "string | undefined"
19444
+ },
19445
+ "description": "Optional icon name to display instead of step number",
19446
+ "fieldName": "iconName"
19447
+ },
19448
+ {
19449
+ "name": "component",
19450
+ "type": {
19451
+ "text": "unknown"
19452
+ },
19453
+ "description": "Optional component to render for this step",
19454
+ "fieldName": "component"
19455
+ },
19456
+ {
19457
+ "name": "clickable",
19458
+ "type": {
19459
+ "text": "boolean"
19460
+ },
19461
+ "default": "false",
19462
+ "description": "Whether this step is clickable",
19463
+ "fieldName": "clickable"
19464
+ },
19465
+ {
19466
+ "name": "active",
19467
+ "type": {
19468
+ "text": "boolean"
19469
+ },
19470
+ "default": "false",
19471
+ "description": "Whether this step is currently active",
19472
+ "fieldName": "active"
19473
+ },
19474
+ {
19475
+ "name": "disabled",
19476
+ "type": {
19477
+ "text": "boolean"
19478
+ },
19479
+ "default": "false",
19480
+ "description": "Whether this step is currently disabled",
19481
+ "fieldName": "disabled"
19482
+ },
19483
+ {
19484
+ "name": "completed",
19485
+ "type": {
19486
+ "text": "boolean"
19487
+ },
19488
+ "default": "false",
19489
+ "description": "Whether this step is completed",
19490
+ "fieldName": "completed"
19491
+ }
19492
+ ],
19493
+ "superclass": {
19494
+ "name": "SgdsElement",
19495
+ "module": "/src/base/sgds-element"
19496
+ },
19497
+ "summary": "A step within a stepper component",
19498
+ "tagName": "sgds-step",
19499
+ "customElement": true,
19500
+ "modulePath": "src/components/Stepper/sgds-step.ts",
19501
+ "cssProperties": [],
19502
+ "cssParts": [],
19503
+ "cssStates": [],
19504
+ "events": []
19505
+ }
19506
+ ],
19507
+ "exports": [
19508
+ {
19509
+ "kind": "js",
19510
+ "name": "SgdsStep",
19511
+ "declaration": {
19512
+ "name": "SgdsStep",
19513
+ "module": "src/components/Stepper/sgds-step.ts"
19514
+ }
19515
+ },
19516
+ {
19517
+ "kind": "js",
19518
+ "name": "default",
19519
+ "declaration": {
19520
+ "name": "SgdsStep",
19521
+ "module": "src/components/Stepper/sgds-step.ts"
19522
+ }
19523
+ }
19524
+ ]
19525
+ },
19219
19526
  {
19220
19527
  "kind": "javascript-module",
19221
19528
  "path": "src/components/Stepper/sgds-stepper.ts",
@@ -19224,6 +19531,12 @@
19224
19531
  "kind": "class",
19225
19532
  "description": "",
19226
19533
  "name": "SgdsStepper",
19534
+ "slots": [
19535
+ {
19536
+ "description": "slot for sgds-step children",
19537
+ "name": "default"
19538
+ }
19539
+ ],
19227
19540
  "members": [
19228
19541
  {
19229
19542
  "kind": "field",
@@ -19232,7 +19545,8 @@
19232
19545
  "text": "IStepMetaData[]"
19233
19546
  },
19234
19547
  "default": "[]",
19235
- "description": "The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\nIt is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.",
19548
+ "description": "The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.",
19549
+ "deprecated": "Use sgds-step child components instead of the steps property",
19236
19550
  "attribute": "steps"
19237
19551
  },
19238
19552
  {
@@ -19268,6 +19582,33 @@
19268
19582
  "attribute": "clickable",
19269
19583
  "reflects": true
19270
19584
  },
19585
+ {
19586
+ "kind": "field",
19587
+ "name": "linear",
19588
+ "type": {
19589
+ "text": "boolean"
19590
+ },
19591
+ "default": "false",
19592
+ "description": "When true, the stepper's steps can only be clicked in a linear manner",
19593
+ "attribute": "linear",
19594
+ "reflects": true
19595
+ },
19596
+ {
19597
+ "kind": "field",
19598
+ "name": "_totalSteps",
19599
+ "type": {
19600
+ "text": "number"
19601
+ },
19602
+ "privacy": "private",
19603
+ "default": "0"
19604
+ },
19605
+ {
19606
+ "kind": "field",
19607
+ "name": "hasSlotController",
19608
+ "privacy": "private",
19609
+ "default": "new HasSlotController(this, \"[default]\")",
19610
+ "type": {}
19611
+ },
19271
19612
  {
19272
19613
  "kind": "method",
19273
19614
  "name": "getComponent",
@@ -19413,7 +19754,8 @@
19413
19754
  "text": "IStepMetaData[]"
19414
19755
  },
19415
19756
  "default": "[]",
19416
- "description": "The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\nIt is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.",
19757
+ "description": "The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.",
19758
+ "deprecated": "Use sgds-step child components instead of the steps property",
19417
19759
  "fieldName": "steps"
19418
19760
  },
19419
19761
  {
@@ -19442,6 +19784,15 @@
19442
19784
  "default": "false",
19443
19785
  "description": "When true, the stepper's steps will be clickable",
19444
19786
  "fieldName": "clickable"
19787
+ },
19788
+ {
19789
+ "name": "linear",
19790
+ "type": {
19791
+ "text": "boolean"
19792
+ },
19793
+ "default": "false",
19794
+ "description": "When true, the stepper's steps can only be clicked in a linear manner",
19795
+ "fieldName": "linear"
19445
19796
  }
19446
19797
  ],
19447
19798
  "superclass": {
@@ -19454,8 +19805,7 @@
19454
19805
  "modulePath": "src/components/Stepper/sgds-stepper.ts",
19455
19806
  "cssProperties": [],
19456
19807
  "cssParts": [],
19457
- "cssStates": [],
19458
- "slots": []
19808
+ "cssStates": []
19459
19809
  }
19460
19810
  ],
19461
19811
  "exports": [
@@ -22780,6 +23130,16 @@
22780
23130
  "description": "Emitted when textarea loses focus.",
22781
23131
  "name": "sgds-blur",
22782
23132
  "reactName": "onSgdsBlur"
23133
+ },
23134
+ {
23135
+ "description": "Emitted when the textarea's invalid state is set to true.",
23136
+ "name": "sgds-invalid",
23137
+ "reactName": "onSgdsInvalid"
23138
+ },
23139
+ {
23140
+ "description": "Emitted when the textarea's invalid state is set to false.",
23141
+ "name": "sgds-valid",
23142
+ "reactName": "onSgdsValid"
22783
23143
  }
22784
23144
  ],
22785
23145
  "attributes": [
@@ -26174,6 +26534,21 @@
26174
26534
  "attribute": "invalid",
26175
26535
  "reflects": true
26176
26536
  },
26537
+ {
26538
+ "kind": "method",
26539
+ "name": "setInvalid",
26540
+ "privacy": "public",
26541
+ "parameters": [
26542
+ {
26543
+ "name": "bool",
26544
+ "type": {
26545
+ "text": "boolean"
26546
+ }
26547
+ }
26548
+ ],
26549
+ "description": "Programatically sets the invalid state of the component. Pass in boolean value in the argument",
26550
+ "type": {}
26551
+ },
26177
26552
  {
26178
26553
  "kind": "field",
26179
26554
  "name": "menuList",
@@ -26948,7 +27323,7 @@
26948
27323
  "package": {
26949
27324
  "name": "@govtechsg/sgds-web-component",
26950
27325
  "description": "",
26951
- "version": "3.19.0",
27326
+ "version": "3.20.0-rc.1",
26952
27327
  "author": "GovTechSG",
26953
27328
  "license": "MIT"
26954
27329
  }