@prioticket/design-system-web 1.4.1 → 1.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.
Files changed (7) hide show
  1. package/COMPONENT-DOCUMENTATION.md +19 -20
  2. package/component-documentation.json +20 -25
  3. package/custom-elements.json +60 -170
  4. package/dist/components/pd-select.cjs.js +136 -124
  5. package/dist/components/pd-select.es.js +243 -270
  6. package/dist/types/components/pd-select.d.ts +13 -44
  7. package/package.json +1 -1
package/custom-elements.json CHANGED
@@ -4495,7 +4495,6 @@
4495
4495
  "text": "'filled' | 'outlined'"
4496
4496
  },
4497
4497
  "default": "'outlined'",
4498
- "description": "The variant of the select field.",
4499
4498
  "attribute": "variant",
4500
4499
  "reflects": true
4501
4500
  },
@@ -4506,7 +4505,6 @@
4506
4505
  "text": "string"
4507
4506
  },
4508
4507
  "default": "''",
4509
- "description": "The label for the select field.",
4510
4508
  "attribute": "label"
4511
4509
  },
4512
4510
  {
@@ -4516,7 +4514,6 @@
4516
4514
  "text": "string | string[]"
4517
4515
  },
4518
4516
  "default": "''",
4519
- "description": "The selected value. For multi-select, use an array of values.",
4520
4517
  "attribute": "value",
4521
4518
  "reflects": true
4522
4519
  },
@@ -4527,7 +4524,6 @@
4527
4524
  "text": "boolean"
4528
4525
  },
4529
4526
  "default": "false",
4530
- "description": "Whether the select is disabled.",
4531
4527
  "attribute": "disabled",
4532
4528
  "reflects": true
4533
4529
  },
@@ -4538,7 +4534,6 @@
4538
4534
  "text": "boolean"
4539
4535
  },
4540
4536
  "default": "false",
4541
- "description": "Whether the select is required.",
4542
4537
  "attribute": "required"
4543
4538
  },
4544
4539
  {
@@ -4548,7 +4543,6 @@
4548
4543
  "text": "string"
4549
4544
  },
4550
4545
  "default": "''",
4551
- "description": "The error message to display when `error` is true.",
4552
4546
  "attribute": "error-text"
4553
4547
  },
4554
4548
  {
@@ -4558,7 +4552,6 @@
4558
4552
  "text": "boolean"
4559
4553
  },
4560
4554
  "default": "false",
4561
- "description": "Whether the select has an error state.",
4562
4555
  "attribute": "error",
4563
4556
  "reflects": true
4564
4557
  },
@@ -4569,7 +4562,6 @@
4569
4562
  "text": "string"
4570
4563
  },
4571
4564
  "default": "''",
4572
- "description": "The supporting text to display below the select.",
4573
4565
  "attribute": "supporting-text"
4574
4566
  },
4575
4567
  {
@@ -4579,7 +4571,6 @@
4579
4571
  "text": "SelectOption[]"
4580
4572
  },
4581
4573
  "default": "[]",
4582
- "description": "An array of options to be rendered.",
4583
4574
  "attribute": "options"
4584
4575
  },
4585
4576
  {
@@ -4589,7 +4580,6 @@
4589
4580
  "text": "string"
4590
4581
  },
4591
4582
  "default": "''",
4592
- "description": "The leading icon name.",
4593
4583
  "attribute": "leading-icon"
4594
4584
  },
4595
4585
  {
@@ -4599,7 +4589,6 @@
4599
4589
  "text": "boolean"
4600
4590
  },
4601
4591
  "default": "false",
4602
- "description": "Enable multi-select mode.",
4603
4592
  "attribute": "multiple"
4604
4593
  },
4605
4594
  {
@@ -4608,7 +4597,6 @@
4608
4597
  "type": {
4609
4598
  "text": "number | undefined"
4610
4599
  },
4611
- "description": "Maximum number of selections allowed (only for multi-select).",
4612
4600
  "attribute": "max-selections"
4613
4601
  },
4614
4602
  {
@@ -4618,7 +4606,6 @@
4618
4606
  "text": "boolean"
4619
4607
  },
4620
4608
  "default": "true",
4621
- "description": "Show selected items as chips (default true when multiple).",
4622
4609
  "attribute": "show-chips"
4623
4610
  },
4624
4611
  {
@@ -4628,7 +4615,6 @@
4628
4615
  "text": "'input' | 'filter'"
4629
4616
  },
4630
4617
  "default": "'input'",
4631
- "description": "Chip style variant.",
4632
4618
  "attribute": "chip-variant"
4633
4619
  },
4634
4620
  {
@@ -4638,7 +4624,6 @@
4638
4624
  "text": "string"
4639
4625
  },
4640
4626
  "default": "''",
4641
- "description": "Placeholder text when nothing is selected.",
4642
4627
  "attribute": "placeholder"
4643
4628
  },
4644
4629
  {
@@ -4648,7 +4633,6 @@
4648
4633
  "text": "boolean"
4649
4634
  },
4650
4635
  "default": "false",
4651
- "description": "Enable search/filter functionality in dropdown.",
4652
4636
  "attribute": "searchable"
4653
4637
  },
4654
4638
  {
@@ -4658,8 +4642,7 @@
4658
4642
  "text": "boolean"
4659
4643
  },
4660
4644
  "privacy": "private",
4661
- "default": "false",
4662
- "description": "Internal state for dropdown open/close"
4645
+ "default": "false"
4663
4646
  },
4664
4647
  {
4665
4648
  "kind": "field",
@@ -4668,8 +4651,7 @@
4668
4651
  "text": "string"
4669
4652
  },
4670
4653
  "privacy": "private",
4671
- "default": "''",
4672
- "description": "Internal state for search query (raw, not lowercased)"
4654
+ "default": "''"
4673
4655
  },
4674
4656
  {
4675
4657
  "kind": "field",
@@ -4678,59 +4660,80 @@
4678
4660
  "text": "string[]"
4679
4661
  },
4680
4662
  "privacy": "private",
4681
- "default": "[]",
4682
- "description": "Internal array of selected values for multi-select"
4683
- },
4684
- {
4685
- "kind": "field",
4686
- "name": "boundHandleClickOutside",
4687
- "privacy": "private"
4688
- },
4689
- {
4690
- "kind": "field",
4691
- "name": "boundHandleKeyDown",
4692
- "privacy": "private"
4663
+ "default": "[]"
4693
4664
  },
4694
4665
  {
4695
4666
  "kind": "field",
4696
- "name": "boundUpdateDropdownPosition",
4697
- "privacy": "private"
4667
+ "name": "overlayEl",
4668
+ "type": {
4669
+ "text": "HTMLElement | null"
4670
+ },
4671
+ "privacy": "private",
4672
+ "default": "null"
4698
4673
  },
4699
4674
  {
4700
4675
  "kind": "method",
4701
- "name": "handleChange",
4676
+ "name": "getOptionLabel",
4702
4677
  "privacy": "private",
4678
+ "return": {
4679
+ "type": {
4680
+ "text": "string"
4681
+ }
4682
+ },
4703
4683
  "parameters": [
4704
4684
  {
4705
- "name": "event",
4685
+ "name": "value",
4706
4686
  "type": {
4707
- "text": "Event"
4687
+ "text": "string"
4708
4688
  }
4709
4689
  }
4710
4690
  ]
4711
4691
  },
4692
+ {
4693
+ "kind": "field",
4694
+ "name": "filteredOptions",
4695
+ "type": {
4696
+ "text": "SelectOption[]"
4697
+ },
4698
+ "privacy": "private",
4699
+ "readonly": true
4700
+ },
4701
+ {
4702
+ "kind": "field",
4703
+ "name": "overlayStyles",
4704
+ "privacy": "private",
4705
+ "static": true,
4706
+ "default": "`\n .dropdown {\n background: var(--md-sys-color-surface-container, #f3edf7);\n border-radius: var(--md-sys-shape-corner-medium, 12px);\n box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);\n overflow: hidden;\n max-height: 320px;\n display: flex;\n flex-direction: column;\n animation: dropdown-open 200ms cubic-bezier(0.2, 0, 0, 1) forwards;\n transform-origin: top left;\n }\n\n @keyframes dropdown-open {\n from { opacity: 0; transform: scaleY(0.8); }\n to { opacity: 1; transform: scaleY(1); }\n }\n\n .search {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n background: var(--md-sys-color-surface-container, #f3edf7);\n }\n\n .search input {\n flex: 1;\n border: none;\n background: transparent;\n font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);\n font-size: var(--md-sys-typescale-body-large-size, 1rem);\n color: var(--md-sys-color-on-surface, #1d1b20);\n outline: none;\n }\n\n .options {\n overflow-y: auto;\n flex: 1;\n }\n\n .option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 100ms ease;\n }\n\n .option:hover {\n background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n }\n\n .option[data-selected=\"true\"] {\n background-color: var(--md-sys-color-secondary-container, #e8def8);\n }\n\n .option[data-disabled=\"true\"] {\n opacity: 0.38;\n cursor: default;\n pointer-events: none;\n }\n\n .option span {\n font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);\n font-size: var(--md-sys-typescale-body-large-size, 1rem);\n color: var(--md-sys-color-on-surface, #1d1b20);\n }\n\n .pd-icon {\n font-size: 24px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n }\n `"
4707
+ },
4712
4708
  {
4713
4709
  "kind": "method",
4714
- "name": "handleOpen",
4710
+ "name": "openOverlay",
4715
4711
  "privacy": "private"
4716
4712
  },
4717
4713
  {
4718
4714
  "kind": "method",
4719
- "name": "handleClose",
4715
+ "name": "closeOverlay",
4720
4716
  "privacy": "private"
4721
4717
  },
4722
4718
  {
4723
- "kind": "method",
4719
+ "kind": "field",
4720
+ "name": "updateOverlayPosition",
4721
+ "privacy": "private"
4722
+ },
4723
+ {
4724
+ "kind": "field",
4724
4725
  "name": "handleTriggerClick",
4725
- "privacy": "private",
4726
- "parameters": [
4727
- {
4728
- "name": "event",
4729
- "type": {
4730
- "text": "Event"
4731
- }
4732
- }
4733
- ]
4726
+ "privacy": "private"
4727
+ },
4728
+ {
4729
+ "kind": "field",
4730
+ "name": "handleClickOutside",
4731
+ "privacy": "private"
4732
+ },
4733
+ {
4734
+ "kind": "field",
4735
+ "name": "handleKeyDown",
4736
+ "privacy": "private"
4734
4737
  },
4735
4738
  {
4736
4739
  "kind": "method",
@@ -4738,13 +4741,13 @@
4738
4741
  "privacy": "private",
4739
4742
  "parameters": [
4740
4743
  {
4741
- "name": "optionValue",
4744
+ "name": "value",
4742
4745
  "type": {
4743
4746
  "text": "string"
4744
4747
  }
4745
4748
  },
4746
4749
  {
4747
- "name": "event",
4750
+ "name": "e",
4748
4751
  "type": {
4749
4752
  "text": "Event"
4750
4753
  }
@@ -4757,52 +4760,13 @@
4757
4760
  "privacy": "private",
4758
4761
  "parameters": [
4759
4762
  {
4760
- "name": "optionValue",
4763
+ "name": "value",
4761
4764
  "type": {
4762
4765
  "text": "string"
4763
4766
  }
4764
4767
  },
4765
4768
  {
4766
- "name": "event",
4767
- "type": {
4768
- "text": "Event"
4769
- }
4770
- }
4771
- ]
4772
- },
4773
- {
4774
- "kind": "method",
4775
- "name": "handleClickOutside",
4776
- "privacy": "private",
4777
- "parameters": [
4778
- {
4779
- "name": "event",
4780
- "type": {
4781
- "text": "Event"
4782
- }
4783
- }
4784
- ]
4785
- },
4786
- {
4787
- "kind": "method",
4788
- "name": "handleKeyDown",
4789
- "privacy": "private",
4790
- "parameters": [
4791
- {
4792
- "name": "event",
4793
- "type": {
4794
- "text": "KeyboardEvent"
4795
- }
4796
- }
4797
- ]
4798
- },
4799
- {
4800
- "kind": "method",
4801
- "name": "handleSearchInput",
4802
- "privacy": "private",
4803
- "parameters": [
4804
- {
4805
- "name": "event",
4769
+ "name": "e",
4806
4770
  "type": {
4807
4771
  "text": "Event"
4808
4772
  }
@@ -4811,62 +4775,13 @@
4811
4775
  },
4812
4776
  {
4813
4777
  "kind": "method",
4814
- "name": "updateDropdownPosition",
4815
- "privacy": "private"
4816
- },
4817
- {
4818
- "kind": "method",
4819
- "name": "getOptionLabel",
4778
+ "name": "renderDropdown",
4820
4779
  "privacy": "private",
4821
4780
  "return": {
4822
4781
  "type": {
4823
- "text": "string"
4824
- }
4825
- },
4826
- "parameters": [
4827
- {
4828
- "name": "value",
4829
- "type": {
4830
- "text": "string"
4831
- }
4832
- }
4833
- ]
4834
- },
4835
- {
4836
- "kind": "method",
4837
- "name": "isSelected",
4838
- "privacy": "private",
4839
- "return": {
4840
- "type": {
4841
- "text": "boolean"
4842
- }
4843
- },
4844
- "parameters": [
4845
- {
4846
- "name": "value",
4847
- "type": {
4848
- "text": "string"
4849
- }
4782
+ "text": "TemplateResult"
4850
4783
  }
4851
- ]
4852
- },
4853
- {
4854
- "kind": "field",
4855
- "name": "filteredOptions",
4856
- "type": {
4857
- "text": "SelectOption[]"
4858
- },
4859
- "privacy": "private",
4860
- "readonly": true
4861
- },
4862
- {
4863
- "kind": "field",
4864
- "name": "displayPlaceholder",
4865
- "type": {
4866
- "text": "string"
4867
- },
4868
- "privacy": "private",
4869
- "readonly": true
4784
+ }
4870
4785
  },
4871
4786
  {
4872
4787
  "kind": "method",
@@ -4884,15 +4799,7 @@
4884
4799
  "name": "change",
4885
4800
  "type": {
4886
4801
  "text": "CustomEvent"
4887
- },
4888
- "description": "Fired when the selected value changes."
4889
- },
4890
- {
4891
- "name": "chip-remove",
4892
- "type": {
4893
- "text": "CustomEvent"
4894
- },
4895
- "description": "Fired when a chip is removed in multi-select mode."
4802
+ }
4896
4803
  }
4897
4804
  ],
4898
4805
  "attributes": [
@@ -4902,7 +4809,6 @@
4902
4809
  "text": "'filled' | 'outlined'"
4903
4810
  },
4904
4811
  "default": "'outlined'",
4905
- "description": "The variant of the select field.",
4906
4812
  "fieldName": "variant"
4907
4813
  },
4908
4814
  {
@@ -4911,7 +4817,6 @@
4911
4817
  "text": "string"
4912
4818
  },
4913
4819
  "default": "''",
4914
- "description": "The label for the select field.",
4915
4820
  "fieldName": "label"
4916
4821
  },
4917
4822
  {
@@ -4920,7 +4825,6 @@
4920
4825
  "text": "string | string[]"
4921
4826
  },
4922
4827
  "default": "''",
4923
- "description": "The selected value. For multi-select, use an array of values.",
4924
4828
  "fieldName": "value"
4925
4829
  },
4926
4830
  {
@@ -4929,7 +4833,6 @@
4929
4833
  "text": "boolean"
4930
4834
  },
4931
4835
  "default": "false",
4932
- "description": "Whether the select is disabled.",
4933
4836
  "fieldName": "disabled"
4934
4837
  },
4935
4838
  {
@@ -4938,7 +4841,6 @@
4938
4841
  "text": "boolean"
4939
4842
  },
4940
4843
  "default": "false",
4941
- "description": "Whether the select is required.",
4942
4844
  "fieldName": "required"
4943
4845
  },
4944
4846
  {
@@ -4947,7 +4849,6 @@
4947
4849
  "text": "string"
4948
4850
  },
4949
4851
  "default": "''",
4950
- "description": "The error message to display when `error` is true.",
4951
4852
  "fieldName": "errorText"
4952
4853
  },
4953
4854
  {
@@ -4956,7 +4857,6 @@
4956
4857
  "text": "boolean"
4957
4858
  },
4958
4859
  "default": "false",
4959
- "description": "Whether the select has an error state.",
4960
4860
  "fieldName": "error"
4961
4861
  },
4962
4862
  {
@@ -4965,7 +4865,6 @@
4965
4865
  "text": "string"
4966
4866
  },
4967
4867
  "default": "''",
4968
- "description": "The supporting text to display below the select.",
4969
4868
  "fieldName": "supportingText"
4970
4869
  },
4971
4870
  {
@@ -4974,7 +4873,6 @@
4974
4873
  "text": "SelectOption[]"
4975
4874
  },
4976
4875
  "default": "[]",
4977
- "description": "An array of options to be rendered.",
4978
4876
  "fieldName": "options"
4979
4877
  },
4980
4878
  {
@@ -4983,7 +4881,6 @@
4983
4881
  "text": "string"
4984
4882
  },
4985
4883
  "default": "''",
4986
- "description": "The leading icon name.",
4987
4884
  "fieldName": "leadingIcon"
4988
4885
  },
4989
4886
  {
@@ -4992,7 +4889,6 @@
4992
4889
  "text": "boolean"
4993
4890
  },
4994
4891
  "default": "false",
4995
- "description": "Enable multi-select mode.",
4996
4892
  "fieldName": "multiple"
4997
4893
  },
4998
4894
  {
@@ -5000,7 +4896,6 @@
5000
4896
  "type": {
5001
4897
  "text": "number | undefined"
5002
4898
  },
5003
- "description": "Maximum number of selections allowed (only for multi-select).",
5004
4899
  "fieldName": "maxSelections"
5005
4900
  },
5006
4901
  {
@@ -5009,7 +4904,6 @@
5009
4904
  "text": "boolean"
5010
4905
  },
5011
4906
  "default": "true",
5012
- "description": "Show selected items as chips (default true when multiple).",
5013
4907
  "fieldName": "showChips"
5014
4908
  },
5015
4909
  {
@@ -5018,7 +4912,6 @@
5018
4912
  "text": "'input' | 'filter'"
5019
4913
  },
5020
4914
  "default": "'input'",
5021
- "description": "Chip style variant.",
5022
4915
  "fieldName": "chipVariant"
5023
4916
  },
5024
4917
  {
@@ -5027,7 +4920,6 @@
5027
4920
  "text": "string"
5028
4921
  },
5029
4922
  "default": "''",
5030
- "description": "Placeholder text when nothing is selected.",
5031
4923
  "fieldName": "placeholder"
5032
4924
  },
5033
4925
  {
@@ -5036,7 +4928,6 @@
5036
4928
  "text": "boolean"
5037
4929
  },
5038
4930
  "default": "false",
5039
- "description": "Enable search/filter functionality in dropdown.",
5040
4931
  "fieldName": "searchable"
5041
4932
  }
5042
4933
  ],
@@ -5044,7 +4935,6 @@
5044
4935
  "name": "LitElement",
5045
4936
  "package": "lit"
5046
4937
  },
5047
- "summary": "A thin wrapper around the Material Web Select component with multi-select support.",
5048
4938
  "tagName": "pd-select",
5049
4939
  "customElement": true
5050
4940
  }