@warp-ds/elements 2.4.0-next.3 → 2.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/dist/custom-elements.json +148 -3267
- package/dist/index.d.ts +34 -762
- package/dist/packages/checkbox/checkbox-group.js +11 -3
- package/dist/packages/checkbox/checkbox.js +201 -2572
- package/dist/packages/deadtoggle/index.js +51 -2547
- package/dist/packages/pageindicator/index.js +44 -28
- package/dist/packages/pagination/index.js +183 -2484
- package/dist/packages/radio/radio-group-styles.js +3 -3
- package/dist/packages/radio/radio-group.js +313 -2619
- package/dist/packages/radio/radio-styles.js +0 -1
- package/dist/packages/radio/radio.js +109 -2556
- package/dist/packages/radio/radio.stories.js +47 -3688
- package/dist/packages/slider/slider-thumb.js +400 -2647
- package/dist/packages/slider/slider.js +272 -2603
- package/dist/packages/stepindicator/index.js +189 -2459
- package/dist/packages/tabs/tab.js +91 -2451
- package/dist/packages/tabs/tabs.js +251 -2444
- package/dist/packages/textarea/textarea.js +210 -2465
- package/dist/web-types.json +28 -811
- package/package.json +1 -37
- package/dist/packages/checkbox/checkbox-group.js.map +0 -7
- package/dist/packages/checkbox/checkbox.js.map +0 -7
- package/dist/packages/deadtoggle/index.js.map +0 -7
- package/dist/packages/pageindicator/index.js.map +0 -7
- package/dist/packages/pagination/index.js.map +0 -7
- package/dist/packages/radio/radio-group-styles.js.map +0 -7
- package/dist/packages/radio/radio-group.js.map +0 -7
- package/dist/packages/radio/radio-styles.js.map +0 -7
- package/dist/packages/radio/radio.js.map +0 -7
- package/dist/packages/radio/radio.stories.js.map +0 -7
- package/dist/packages/slider/slider-thumb.js.map +0 -7
- package/dist/packages/slider/slider.js.map +0 -7
- package/dist/packages/stepindicator/index.js.map +0 -7
- package/dist/packages/tabs/tab.js.map +0 -7
- package/dist/packages/tabs/tabs.js.map +0 -7
- package/dist/packages/textarea/textarea.js.map +0 -7
package/dist/index.d.ts
CHANGED
|
@@ -17,21 +17,8 @@ import type { ModalHeader } from "./packages/modal/modal-header.ts";
|
|
|
17
17
|
import type { ModalMain } from "./packages/modal/modal-main.ts";
|
|
18
18
|
import type { WarpToastContainer } from "./packages/toast/toast-container.ts";
|
|
19
19
|
import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
|
|
20
|
-
import type { WarpCombobox } from "./packages/combobox/index.ts";
|
|
21
|
-
import type { WarpDeadToggle } from "./packages/deadtoggle/index.ts";
|
|
22
|
-
import type { WarpPageIndicator } from "./packages/pageindicator/index.ts";
|
|
23
|
-
import type { WarpPagination } from "./packages/pagination/index.ts";
|
|
24
|
-
import type { WRadio } from "./packages/radio/radio.ts";
|
|
25
|
-
import type { WRadioGroup } from "./packages/radio/radio-group.ts";
|
|
26
|
-
import type { WCheckbox } from "./packages/checkbox/checkbox.ts";
|
|
27
|
-
import type { WCheckboxGroup } from "./packages/checkbox/checkbox-group.ts";
|
|
28
|
-
import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
|
|
29
|
-
import type { WarpSlider } from "./packages/slider/slider.ts";
|
|
30
|
-
import type { WarpStepIndicator, WarpStep } from "./packages/stepindicator/index.ts";
|
|
31
20
|
import type { WarpSwitch } from "./packages/switch/index.ts";
|
|
32
|
-
import type {
|
|
33
|
-
import type { WarpTabs } from "./packages/tabs/tabs.ts";
|
|
34
|
-
import type { WarpTextarea } from "./packages/textarea/textarea.ts";
|
|
21
|
+
import type { WarpCombobox } from "./packages/combobox/index.ts";
|
|
35
22
|
|
|
36
23
|
/**
|
|
37
24
|
* This type can be used to create scoped tags for your components.
|
|
@@ -589,6 +576,21 @@ the query will point to an element that doesn't exist anymore. */
|
|
|
589
576
|
}
|
|
590
577
|
|
|
591
578
|
|
|
579
|
+
export type WarpSwitchProps = {
|
|
580
|
+
/** */
|
|
581
|
+
"name"?: WarpSwitch['name'];
|
|
582
|
+
/** */
|
|
583
|
+
"value"?: WarpSwitch['value'];
|
|
584
|
+
/** */
|
|
585
|
+
"checked"?: WarpSwitch['checked'];
|
|
586
|
+
/** */
|
|
587
|
+
"disabled"?: WarpSwitch['disabled'];
|
|
588
|
+
|
|
589
|
+
/** */
|
|
590
|
+
"onchange"?: (e: CustomEvent<CustomEvent>) => void;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
|
|
592
594
|
export type WarpComboboxProps = {
|
|
593
595
|
/** The available options to select from */
|
|
594
596
|
"options"?: WarpCombobox['options'];
|
|
@@ -632,353 +634,6 @@ export type WarpComboboxProps = {
|
|
|
632
634
|
"autocomplete"?: WarpCombobox['autocomplete'];
|
|
633
635
|
|
|
634
636
|
|
|
635
|
-
}
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
export type WarpDeadToggleProps = {
|
|
639
|
-
/** */
|
|
640
|
-
"type"?: WarpDeadToggle['type'];
|
|
641
|
-
/** */
|
|
642
|
-
"checked"?: WarpDeadToggle['checked'];
|
|
643
|
-
/** */
|
|
644
|
-
"indeterminate"?: WarpDeadToggle['indeterminate'];
|
|
645
|
-
/** */
|
|
646
|
-
"invalid"?: WarpDeadToggle['invalid'];
|
|
647
|
-
/** */
|
|
648
|
-
"disabled"?: WarpDeadToggle['disabled'];
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
}
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
export type WarpPageIndicatorProps = {
|
|
655
|
-
/** Currently selected page (1-based index) */
|
|
656
|
-
"selected-page"?: WarpPageIndicator['selectedPage'];
|
|
657
|
-
/** Currently selected page (1-based index) */
|
|
658
|
-
"selectedPage"?: WarpPageIndicator['selectedPage'];
|
|
659
|
-
/** Total number of pages */
|
|
660
|
-
"page-count"?: WarpPageIndicator['pageCount'];
|
|
661
|
-
/** Total number of pages */
|
|
662
|
-
"pageCount"?: WarpPageIndicator['pageCount'];
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
}
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
export type WarpPaginationProps = {
|
|
669
|
-
/** */
|
|
670
|
-
"base-url"?: WarpPagination['baseUrl'];
|
|
671
|
-
/** */
|
|
672
|
-
"baseUrl"?: WarpPagination['baseUrl'];
|
|
673
|
-
/** */
|
|
674
|
-
"pages"?: WarpPagination['pages'];
|
|
675
|
-
/** */
|
|
676
|
-
"current-page"?: WarpPagination['currentPageNumber'];
|
|
677
|
-
/** */
|
|
678
|
-
"currentPageNumber"?: WarpPagination['currentPageNumber'];
|
|
679
|
-
/** */
|
|
680
|
-
"visible-pages"?: WarpPagination['visiblePages'];
|
|
681
|
-
/** */
|
|
682
|
-
"visiblePages"?: WarpPagination['visiblePages'];
|
|
683
|
-
|
|
684
|
-
/** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
|
|
685
|
-
"onpage-click"?: (e: CustomEvent<CustomEvent>) => void;
|
|
686
|
-
}
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
export type WRadioProps = {
|
|
690
|
-
/** The string pointing to a form's id. */
|
|
691
|
-
"form"?: WRadio['form'];
|
|
692
|
-
/** The radio's value. When selected, the radio group will receive this value. */
|
|
693
|
-
"value"?: WRadio['value'];
|
|
694
|
-
/** The radio's value. When selected, the radio group will receive this value. */
|
|
695
|
-
"appearance"?: WRadio['appearance'];
|
|
696
|
-
/** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
|
|
697
|
-
attribute can typically be omitted. */
|
|
698
|
-
"size"?: WRadio['size'];
|
|
699
|
-
/** Disables the radio. */
|
|
700
|
-
"disabled"?: WRadio['disabled'];
|
|
701
|
-
/** */
|
|
702
|
-
"checked"?: WRadio['checked'];
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
}
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
export type WRadioGroupProps = {
|
|
709
|
-
/** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
|
|
710
|
-
instead. */
|
|
711
|
-
"label"?: WRadioGroup['label'];
|
|
712
|
-
/** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
|
|
713
|
-
"hint"?: WRadioGroup['hint'];
|
|
714
|
-
/** The name of the radio group, submitted as a name/value pair with form data. */
|
|
715
|
-
"name"?: WRadioGroup['name'];
|
|
716
|
-
/** Disables the radio group and all child radios. */
|
|
717
|
-
"disabled"?: WRadioGroup['disabled'];
|
|
718
|
-
/** The orientation in which to show radio items. */
|
|
719
|
-
"orientation"?: WRadioGroup['orientation'];
|
|
720
|
-
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
721
|
-
"value"?: WRadioGroup['defaultValue'];
|
|
722
|
-
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
723
|
-
"defaultValue"?: WRadioGroup['defaultValue'];
|
|
724
|
-
/** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
|
|
725
|
-
"size"?: WRadioGroup['size'];
|
|
726
|
-
/** Ensures a child radio is checked before allowing the containing form to submit. */
|
|
727
|
-
"required"?: WRadioGroup['required'];
|
|
728
|
-
/** Used for SSR. if true, will show slotted label on initial render. */
|
|
729
|
-
"with-label"?: WRadioGroup['withLabel'];
|
|
730
|
-
/** Used for SSR. if true, will show slotted label on initial render. */
|
|
731
|
-
"withLabel"?: WRadioGroup['withLabel'];
|
|
732
|
-
/** Used for SSR. if true, will show slotted hint on initial render. */
|
|
733
|
-
"with-hint"?: WRadioGroup['withHint'];
|
|
734
|
-
/** Used for SSR. if true, will show slotted hint on initial render. */
|
|
735
|
-
"withHint"?: WRadioGroup['withHint'];
|
|
736
|
-
/** */
|
|
737
|
-
"hasRadioButtons"?: WRadioGroup['hasRadioButtons'];
|
|
738
|
-
/** */
|
|
739
|
-
"defaultSlot"?: WRadioGroup['defaultSlot'];
|
|
740
|
-
|
|
741
|
-
/** */
|
|
742
|
-
"oninput"?: (e: CustomEvent<InputEvent>) => void;
|
|
743
|
-
/** */
|
|
744
|
-
"onchange"?: (e: CustomEvent<Event>) => void;
|
|
745
|
-
}
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
export type WCheckboxProps = {
|
|
749
|
-
/** */
|
|
750
|
-
"title"?: WCheckbox['title'];
|
|
751
|
-
/** The name of the checkbox, submitted as a name/value pair with form data. */
|
|
752
|
-
"name"?: WCheckbox['name'];
|
|
753
|
-
/** The value of the checkbox, submitted as a name/value pair with form data. */
|
|
754
|
-
"value"?: WCheckbox['value'];
|
|
755
|
-
/** The checkbox's size. */
|
|
756
|
-
"size"?: WCheckbox['size'];
|
|
757
|
-
/** Disables the checkbox. */
|
|
758
|
-
"disabled"?: WCheckbox['disabled'];
|
|
759
|
-
/** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
|
|
760
|
-
all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
|
|
761
|
-
"indeterminate"?: WCheckbox['indeterminate'];
|
|
762
|
-
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
763
|
-
"checked"?: WCheckbox['defaultChecked'];
|
|
764
|
-
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
765
|
-
"defaultChecked"?: WCheckbox['defaultChecked'];
|
|
766
|
-
/** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
767
|
-
to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
|
|
768
|
-
the same document or shadow root for this to work. */
|
|
769
|
-
"form"?: WCheckbox['form'];
|
|
770
|
-
/** Makes the checkbox a required field. */
|
|
771
|
-
"required"?: WCheckbox['required'];
|
|
772
|
-
/** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
|
|
773
|
-
"hint"?: WCheckbox['hint'];
|
|
774
|
-
/** */
|
|
775
|
-
"input"?: WCheckbox['input'];
|
|
776
|
-
|
|
777
|
-
/** */
|
|
778
|
-
"onchange"?: (e: CustomEvent<Event>) => void;
|
|
779
|
-
}
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
export type WCheckboxGroupProps = {
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
}
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
export type WarpSliderThumbProps = {
|
|
789
|
-
/** */
|
|
790
|
-
"aria-label"?: WarpSliderThumb['ariaLabel'];
|
|
791
|
-
/** */
|
|
792
|
-
"ariaLabel"?: WarpSliderThumb['ariaLabel'];
|
|
793
|
-
/** */
|
|
794
|
-
"aria-description"?: WarpSliderThumb['ariaDescription'];
|
|
795
|
-
/** */
|
|
796
|
-
"ariaDescription"?: WarpSliderThumb['ariaDescription'];
|
|
797
|
-
/** */
|
|
798
|
-
"label"?: WarpSliderThumb['label'];
|
|
799
|
-
/** */
|
|
800
|
-
"name"?: WarpSliderThumb['name'];
|
|
801
|
-
/** */
|
|
802
|
-
"value"?: WarpSliderThumb['value'];
|
|
803
|
-
/** */
|
|
804
|
-
"disabled"?: WarpSliderThumb['disabled'];
|
|
805
|
-
/** */
|
|
806
|
-
"invalid"?: WarpSliderThumb['invalid'];
|
|
807
|
-
/** Set by `<w-slider>` */
|
|
808
|
-
"allowValuesOutsideRange"?: WarpSliderThumb['allowValuesOutsideRange'];
|
|
809
|
-
/** Set by `<w-slider>` */
|
|
810
|
-
"markers"?: WarpSliderThumb['markers'];
|
|
811
|
-
/** Set by `<w-slider>` */
|
|
812
|
-
"required"?: WarpSliderThumb['required'];
|
|
813
|
-
/** Set by `<w-slider>` */
|
|
814
|
-
"step"?: WarpSliderThumb['step'];
|
|
815
|
-
/** Set by `<w-slider>` */
|
|
816
|
-
"min"?: WarpSliderThumb['min'];
|
|
817
|
-
/** Set by `<w-slider>` */
|
|
818
|
-
"max"?: WarpSliderThumb['max'];
|
|
819
|
-
/** Set by `<w-slider>` */
|
|
820
|
-
"suffix"?: WarpSliderThumb['suffix'];
|
|
821
|
-
/** JS hook to help you format the numeric value how you want. */
|
|
822
|
-
"formatter"?: WarpSliderThumb['formatter'];
|
|
823
|
-
/** */
|
|
824
|
-
"range"?: WarpSliderThumb['range'];
|
|
825
|
-
/** */
|
|
826
|
-
"textfield"?: WarpSliderThumb['textfield'];
|
|
827
|
-
|
|
828
|
-
/** */
|
|
829
|
-
"onslidervalidity"?: (e: CustomEvent<CustomEvent>) => void;
|
|
830
|
-
}
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
export type WarpSliderProps = {
|
|
834
|
-
/** The slider fieldset label. Required for proper accessibility.
|
|
835
|
-
|
|
836
|
-
If you need to display HTML, use the `label` slot instead. */
|
|
837
|
-
"label"?: WarpSlider['label'];
|
|
838
|
-
/** */
|
|
839
|
-
"disabled"?: WarpSlider['disabled'];
|
|
840
|
-
/** */
|
|
841
|
-
"allow-values-outside-range"?: WarpSlider['allowValuesOutsideRange'];
|
|
842
|
-
/** */
|
|
843
|
-
"allowValuesOutsideRange"?: WarpSlider['allowValuesOutsideRange'];
|
|
844
|
-
/** */
|
|
845
|
-
"error"?: WarpSlider['error'];
|
|
846
|
-
/** */
|
|
847
|
-
"help-text"?: WarpSlider['helpText'];
|
|
848
|
-
/** */
|
|
849
|
-
"helpText"?: WarpSlider['helpText'];
|
|
850
|
-
/** */
|
|
851
|
-
"invalid"?: WarpSlider['invalid'];
|
|
852
|
-
/** Ensures a child slider thumb has a value before allowing the containing form to submit. */
|
|
853
|
-
"required"?: WarpSlider['required'];
|
|
854
|
-
/** */
|
|
855
|
-
"min"?: WarpSlider['min'];
|
|
856
|
-
/** */
|
|
857
|
-
"max"?: WarpSlider['max'];
|
|
858
|
-
/** Pass a value similar to step to create visual markers at that interval */
|
|
859
|
-
"markers"?: WarpSlider['markers'];
|
|
860
|
-
/** */
|
|
861
|
-
"step"?: WarpSlider['step'];
|
|
862
|
-
/** Suffix used in text input fields and for the min and max values of the slider. */
|
|
863
|
-
"suffix"?: WarpSlider['suffix'];
|
|
864
|
-
/** Function to format the to- and from labels and value in the slider thumb tooltip. */
|
|
865
|
-
"formatter"?: WarpSlider['formatter'];
|
|
866
|
-
/** */
|
|
867
|
-
"_invalidMessage"?: WarpSlider['_invalidMessage'];
|
|
868
|
-
/** */
|
|
869
|
-
"_hasInternalError"?: WarpSlider['_hasInternalError'];
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
}
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
export type WarpStepIndicatorProps = {
|
|
876
|
-
/** */
|
|
877
|
-
"horizontal"?: WarpStepIndicator['horizontal'];
|
|
878
|
-
/** */
|
|
879
|
-
"right"?: WarpStepIndicator['right'];
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
}
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
export type WarpStepProps = {
|
|
886
|
-
/** */
|
|
887
|
-
"active"?: WarpStep['active'];
|
|
888
|
-
/** */
|
|
889
|
-
"completed"?: WarpStep['completed'];
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
}
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
export type WarpSwitchProps = {
|
|
896
|
-
/** */
|
|
897
|
-
"name"?: WarpSwitch['name'];
|
|
898
|
-
/** */
|
|
899
|
-
"value"?: WarpSwitch['value'];
|
|
900
|
-
/** */
|
|
901
|
-
"checked"?: WarpSwitch['checked'];
|
|
902
|
-
/** */
|
|
903
|
-
"disabled"?: WarpSwitch['disabled'];
|
|
904
|
-
|
|
905
|
-
/** */
|
|
906
|
-
"onchange"?: (e: CustomEvent<CustomEvent>) => void;
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
export type WarpTabProps = {
|
|
911
|
-
/** */
|
|
912
|
-
"name"?: WarpTab['name'];
|
|
913
|
-
/** */
|
|
914
|
-
"label"?: WarpTab['label'];
|
|
915
|
-
/** */
|
|
916
|
-
"active"?: WarpTab['active'];
|
|
917
|
-
/** */
|
|
918
|
-
"over"?: WarpTab['over'];
|
|
919
|
-
/** */
|
|
920
|
-
"tab-class"?: WarpTab['tabClass'];
|
|
921
|
-
/** */
|
|
922
|
-
"tabClass"?: WarpTab['tabClass'];
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
}
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
export type WarpTabsProps = {
|
|
929
|
-
/** */
|
|
930
|
-
"active"?: WarpTabs['active'];
|
|
931
|
-
/** */
|
|
932
|
-
"tab-class"?: WarpTabs['tabClass'];
|
|
933
|
-
/** */
|
|
934
|
-
"tabClass"?: WarpTabs['tabClass'];
|
|
935
|
-
|
|
936
|
-
/** */
|
|
937
|
-
"onchange"?: (e: CustomEvent<CustomEvent>) => void;
|
|
938
|
-
}
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
export type WarpTextareaProps = {
|
|
942
|
-
/** */
|
|
943
|
-
"disabled"?: WarpTextarea['disabled'];
|
|
944
|
-
/** */
|
|
945
|
-
"invalid"?: WarpTextarea['invalid'];
|
|
946
|
-
/** */
|
|
947
|
-
"label"?: WarpTextarea['label'];
|
|
948
|
-
/** */
|
|
949
|
-
"help-text"?: WarpTextarea['helpText'];
|
|
950
|
-
/** */
|
|
951
|
-
"helpText"?: WarpTextarea['helpText'];
|
|
952
|
-
/** */
|
|
953
|
-
"maximum-rows"?: WarpTextarea['maxRows'];
|
|
954
|
-
/** */
|
|
955
|
-
"maxRows"?: WarpTextarea['maxRows'];
|
|
956
|
-
/** */
|
|
957
|
-
"minimum-rows"?: WarpTextarea['minRows'];
|
|
958
|
-
/** */
|
|
959
|
-
"minRows"?: WarpTextarea['minRows'];
|
|
960
|
-
/** */
|
|
961
|
-
"name"?: WarpTextarea['name'];
|
|
962
|
-
/** */
|
|
963
|
-
"placeholder"?: WarpTextarea['placeholder'];
|
|
964
|
-
/** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
|
|
965
|
-
"read-only"?: WarpTextarea['readOnly'];
|
|
966
|
-
/** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
|
|
967
|
-
"readOnly"?: WarpTextarea['readOnly'];
|
|
968
|
-
/** */
|
|
969
|
-
"readonly"?: WarpTextarea['readonly'];
|
|
970
|
-
/** */
|
|
971
|
-
"required"?: WarpTextarea['required'];
|
|
972
|
-
/** */
|
|
973
|
-
"value"?: WarpTextarea['value'];
|
|
974
|
-
/** */
|
|
975
|
-
"optional"?: WarpTextarea['optional'];
|
|
976
|
-
/** */
|
|
977
|
-
"minHeight"?: WarpTextarea['minHeight'];
|
|
978
|
-
/** */
|
|
979
|
-
"maxHeight"?: WarpTextarea['maxHeight'];
|
|
980
|
-
|
|
981
|
-
|
|
982
637
|
}
|
|
983
638
|
|
|
984
639
|
export type CustomElements = {
|
|
@@ -1487,347 +1142,6 @@ export type WarpTextareaProps = {
|
|
|
1487
1142
|
"w-datepicker": Partial<WarpDatepickerProps & BaseProps<WarpDatepicker> & BaseEvents>;
|
|
1488
1143
|
|
|
1489
1144
|
|
|
1490
|
-
/**
|
|
1491
|
-
* A combobox element for text input with selectable options.
|
|
1492
|
-
*
|
|
1493
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
|
|
1494
|
-
*
|
|
1495
|
-
* ## Attributes & Properties
|
|
1496
|
-
*
|
|
1497
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1498
|
-
*
|
|
1499
|
-
* - `options`: The available options to select from
|
|
1500
|
-
* - `label`: Label above input
|
|
1501
|
-
* - `placeholder`: Input placeholder
|
|
1502
|
-
* - `value`: The input value
|
|
1503
|
-
* - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
|
|
1504
|
-
* - `select-on-blur`/`selectOnBlur`: Select active option on blur
|
|
1505
|
-
* - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
|
|
1506
|
-
* - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
|
|
1507
|
-
* - `invalid`: Renders the input field in an invalid state
|
|
1508
|
-
* - `help-text`/`helpText`: The content to display as the help text
|
|
1509
|
-
* - `disabled`: Whether the element is disabled
|
|
1510
|
-
* - `required`: Whether the element is required
|
|
1511
|
-
* - `optional`: Whether to show optional text
|
|
1512
|
-
* - `name`: Name attribute for form submission
|
|
1513
|
-
* - `autocomplete`: Autocomplete attribute for the input field
|
|
1514
|
-
*
|
|
1515
|
-
* ## Methods
|
|
1516
|
-
*
|
|
1517
|
-
* Methods that can be called to access component functionality.
|
|
1518
|
-
*
|
|
1519
|
-
* - `resetFormControl() => void`: undefined
|
|
1520
|
-
*/
|
|
1521
|
-
"w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & BaseEvents>;
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
/**
|
|
1525
|
-
* Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.
|
|
1526
|
-
*
|
|
1527
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)
|
|
1528
|
-
*
|
|
1529
|
-
* ## Attributes & Properties
|
|
1530
|
-
*
|
|
1531
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1532
|
-
*
|
|
1533
|
-
* - `type`: undefined
|
|
1534
|
-
* - `checked`: undefined
|
|
1535
|
-
* - `indeterminate`: undefined
|
|
1536
|
-
* - `invalid`: undefined
|
|
1537
|
-
* - `disabled`: undefined
|
|
1538
|
-
*/
|
|
1539
|
-
"w-dead-toggle": Partial<WarpDeadToggleProps & BaseProps<WarpDeadToggle> & BaseEvents>;
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
/**
|
|
1543
|
-
*
|
|
1544
|
-
*
|
|
1545
|
-
* ## Attributes & Properties
|
|
1546
|
-
*
|
|
1547
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1548
|
-
*
|
|
1549
|
-
* - `selected-page`/`selectedPage`: Currently selected page (1-based index)
|
|
1550
|
-
* - `page-count`/`pageCount`: Total number of pages
|
|
1551
|
-
*/
|
|
1552
|
-
"w-pageindicator": Partial<WarpPageIndicatorProps & BaseProps<WarpPageIndicator> & BaseEvents>;
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
/**
|
|
1556
|
-
* Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
|
|
1557
|
-
*
|
|
1558
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
|
|
1559
|
-
*
|
|
1560
|
-
* ## Attributes & Properties
|
|
1561
|
-
*
|
|
1562
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1563
|
-
*
|
|
1564
|
-
* - `base-url`/`baseUrl`: undefined
|
|
1565
|
-
* - `pages`: undefined
|
|
1566
|
-
* - `current-page`/`currentPageNumber`: undefined
|
|
1567
|
-
* - `visible-pages`/`visiblePages`: undefined
|
|
1568
|
-
*
|
|
1569
|
-
* ## Events
|
|
1570
|
-
*
|
|
1571
|
-
* Events that will be emitted by the component.
|
|
1572
|
-
*
|
|
1573
|
-
* - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
|
|
1574
|
-
*/
|
|
1575
|
-
"w-pagination": Partial<WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents>;
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
/**
|
|
1579
|
-
*
|
|
1580
|
-
*
|
|
1581
|
-
* ## Attributes & Properties
|
|
1582
|
-
*
|
|
1583
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1584
|
-
*
|
|
1585
|
-
* - `form`: The string pointing to a form's id.
|
|
1586
|
-
* - `value`: The radio's value. When selected, the radio group will receive this value.
|
|
1587
|
-
* - `appearance`: The radio's value. When selected, the radio group will receive this value.
|
|
1588
|
-
* - `size`: The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
|
|
1589
|
-
* attribute can typically be omitted.
|
|
1590
|
-
* - `disabled`: Disables the radio.
|
|
1591
|
-
* - `checked`: undefined (property only)
|
|
1592
|
-
*
|
|
1593
|
-
* ## Methods
|
|
1594
|
-
*
|
|
1595
|
-
* Methods that can be called to access component functionality.
|
|
1596
|
-
*
|
|
1597
|
-
* - `setValue() => void`: undefined
|
|
1598
|
-
*/
|
|
1599
|
-
"w-radio": Partial<WRadioProps & BaseProps<WRadio> & BaseEvents>;
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
/**
|
|
1603
|
-
*
|
|
1604
|
-
*
|
|
1605
|
-
* ## Attributes & Properties
|
|
1606
|
-
*
|
|
1607
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1608
|
-
*
|
|
1609
|
-
* - `label`: The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
|
|
1610
|
-
* instead.
|
|
1611
|
-
* - `hint`: The radio groups's hint. If you need to display HTML, use the `hint` slot instead.
|
|
1612
|
-
* - `name`: The name of the radio group, submitted as a name/value pair with form data.
|
|
1613
|
-
* - `disabled`: Disables the radio group and all child radios.
|
|
1614
|
-
* - `orientation`: The orientation in which to show radio items.
|
|
1615
|
-
* - `value`/`defaultValue`: The default value of the form control. Primarily used for resetting the form control.
|
|
1616
|
-
* - `size`: The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden.
|
|
1617
|
-
* - `required`: Ensures a child radio is checked before allowing the containing form to submit.
|
|
1618
|
-
* - `with-label`/`withLabel`: Used for SSR. if true, will show slotted label on initial render.
|
|
1619
|
-
* - `with-hint`/`withHint`: Used for SSR. if true, will show slotted hint on initial render.
|
|
1620
|
-
* - `hasRadioButtons`: undefined (property only)
|
|
1621
|
-
* - `defaultSlot`: undefined (property only)
|
|
1622
|
-
* - `value`: The current value of the radio group, submitted as a name/value pair with form data. (property only)
|
|
1623
|
-
* - `validationTarget`: We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
|
|
1624
|
-
* the first radio element. (property only) (readonly)
|
|
1625
|
-
*
|
|
1626
|
-
* ## Events
|
|
1627
|
-
*
|
|
1628
|
-
* Events that will be emitted by the component.
|
|
1629
|
-
*
|
|
1630
|
-
* - `input`: undefined
|
|
1631
|
-
* - `change`: undefined
|
|
1632
|
-
*
|
|
1633
|
-
* ## Slots
|
|
1634
|
-
*
|
|
1635
|
-
* Areas where markup can be added to the component.
|
|
1636
|
-
*
|
|
1637
|
-
* - `label`: Alternative to the `label` attribute should you need custom HTML.
|
|
1638
|
-
*
|
|
1639
|
-
* ## Methods
|
|
1640
|
-
*
|
|
1641
|
-
* Methods that can be called to access component functionality.
|
|
1642
|
-
*
|
|
1643
|
-
* - `formResetCallback(args: Parameters<BaseFormAssociatedElement['formResetCallback']>) => void`: undefined
|
|
1644
|
-
* - `focus(options?: FocusOptions) => void`: Sets focus on the radio group.
|
|
1645
|
-
*/
|
|
1646
|
-
"w-radio-group": Partial<WRadioGroupProps & BaseProps<WRadioGroup> & BaseEvents>;
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
/**
|
|
1650
|
-
*
|
|
1651
|
-
*
|
|
1652
|
-
* ## Attributes & Properties
|
|
1653
|
-
*
|
|
1654
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1655
|
-
*
|
|
1656
|
-
* - `title`: undefined
|
|
1657
|
-
* - `name`: The name of the checkbox, submitted as a name/value pair with form data.
|
|
1658
|
-
* - `value`: The value of the checkbox, submitted as a name/value pair with form data.
|
|
1659
|
-
* - `size`: The checkbox's size.
|
|
1660
|
-
* - `disabled`: Disables the checkbox.
|
|
1661
|
-
* - `indeterminate`: Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
|
|
1662
|
-
* all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
|
|
1663
|
-
* - `checked`/`defaultChecked`: The default value of the form control. Primarily used for resetting the form control.
|
|
1664
|
-
* - `form`: By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
1665
|
-
* to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
|
|
1666
|
-
* the same document or shadow root for this to work.
|
|
1667
|
-
* - `required`: Makes the checkbox a required field.
|
|
1668
|
-
* - `hint`: The checkbox's hint. If you need to display HTML, use the `hint` slot instead.
|
|
1669
|
-
* - `input`: undefined (property only)
|
|
1670
|
-
* - `checked`: Draws the checkbox in a checked state. (property only)
|
|
1671
|
-
*
|
|
1672
|
-
* ## Events
|
|
1673
|
-
*
|
|
1674
|
-
* Events that will be emitted by the component.
|
|
1675
|
-
*
|
|
1676
|
-
* - `change`: undefined
|
|
1677
|
-
*
|
|
1678
|
-
* ## Methods
|
|
1679
|
-
*
|
|
1680
|
-
* Methods that can be called to access component functionality.
|
|
1681
|
-
*
|
|
1682
|
-
* - `handleDefaultCheckedChange() => void`: undefined
|
|
1683
|
-
* - `handleValueOrCheckedChange() => void`: undefined
|
|
1684
|
-
* - `handleStateChange() => void`: undefined
|
|
1685
|
-
* - `handleDisabledChange() => void`: undefined
|
|
1686
|
-
* - `formResetCallback() => void`: undefined
|
|
1687
|
-
* - `click() => void`: Simulates a click on the checkbox.
|
|
1688
|
-
* - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox.
|
|
1689
|
-
* - `blur() => void`: Removes focus from the checkbox.
|
|
1690
|
-
*/
|
|
1691
|
-
"w-checkbox": Partial<WCheckboxProps & BaseProps<WCheckbox> & BaseEvents>;
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
/**
|
|
1695
|
-
*
|
|
1696
|
-
*/
|
|
1697
|
-
"w-checkbox-group": Partial<WCheckboxGroupProps & BaseProps<WCheckboxGroup> & BaseEvents>;
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
/**
|
|
1701
|
-
* Component to place inside a `<w-slider>`.
|
|
1702
|
-
*
|
|
1703
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
|
|
1704
|
-
*
|
|
1705
|
-
* ## Attributes & Properties
|
|
1706
|
-
*
|
|
1707
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1708
|
-
*
|
|
1709
|
-
* - `aria-label`/`ariaLabel`: undefined
|
|
1710
|
-
* - `aria-description`/`ariaDescription`: undefined
|
|
1711
|
-
* - `label`: undefined
|
|
1712
|
-
* - `name`: undefined
|
|
1713
|
-
* - `value`: undefined
|
|
1714
|
-
* - `disabled`: undefined
|
|
1715
|
-
* - `invalid`: undefined
|
|
1716
|
-
* - `allowValuesOutsideRange`: Set by `<w-slider>` (property only)
|
|
1717
|
-
* - `markers`: Set by `<w-slider>` (property only)
|
|
1718
|
-
* - `required`: Set by `<w-slider>` (property only)
|
|
1719
|
-
* - `step`: Set by `<w-slider>` (property only)
|
|
1720
|
-
* - `min`: Set by `<w-slider>` (property only)
|
|
1721
|
-
* - `max`: Set by `<w-slider>` (property only)
|
|
1722
|
-
* - `suffix`: Set by `<w-slider>` (property only)
|
|
1723
|
-
* - `formatter`: JS hook to help you format the numeric value how you want. (property only)
|
|
1724
|
-
* - `range`: undefined (property only)
|
|
1725
|
-
* - `textfield`: undefined (property only)
|
|
1726
|
-
* - `boundaryValue`: undefined (property only) (readonly)
|
|
1727
|
-
* - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
|
|
1728
|
-
* - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
|
|
1729
|
-
*
|
|
1730
|
-
* ## Events
|
|
1731
|
-
*
|
|
1732
|
-
* Events that will be emitted by the component.
|
|
1733
|
-
*
|
|
1734
|
-
* - `slidervalidity`: undefined
|
|
1735
|
-
*
|
|
1736
|
-
* ## Methods
|
|
1737
|
-
*
|
|
1738
|
-
* Methods that can be called to access component functionality.
|
|
1739
|
-
*
|
|
1740
|
-
* - `resetFormControl() => void`: undefined
|
|
1741
|
-
* - `updateFieldAfterValidation() => void`: undefined
|
|
1742
|
-
*/
|
|
1743
|
-
"w-slider-thumb": Partial<WarpSliderThumbProps & BaseProps<WarpSliderThumb> & BaseEvents>;
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
/**
|
|
1747
|
-
* Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
|
|
1748
|
-
*
|
|
1749
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
|
|
1750
|
-
*
|
|
1751
|
-
* ## Attributes & Properties
|
|
1752
|
-
*
|
|
1753
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1754
|
-
*
|
|
1755
|
-
* - `label`: The slider fieldset label. Required for proper accessibility.
|
|
1756
|
-
*
|
|
1757
|
-
* If you need to display HTML, use the `label` slot instead.
|
|
1758
|
-
* - `disabled`: undefined
|
|
1759
|
-
* - `allow-values-outside-range`/`allowValuesOutsideRange`: undefined
|
|
1760
|
-
* - `error`: undefined
|
|
1761
|
-
* - `help-text`/`helpText`: undefined
|
|
1762
|
-
* - `invalid`: undefined
|
|
1763
|
-
* - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit.
|
|
1764
|
-
* - `min`: undefined
|
|
1765
|
-
* - `max`: undefined
|
|
1766
|
-
* - `markers`: Pass a value similar to step to create visual markers at that interval
|
|
1767
|
-
* - `step`: undefined
|
|
1768
|
-
* - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
|
|
1769
|
-
* - `formatter`: Function to format the to- and from labels and value in the slider thumb tooltip. (property only)
|
|
1770
|
-
* - `_invalidMessage`: undefined (property only)
|
|
1771
|
-
* - `_hasInternalError`: undefined (property only)
|
|
1772
|
-
* - `edgeMin`: undefined (property only) (readonly)
|
|
1773
|
-
* - `edgeMax`: undefined (property only) (readonly)
|
|
1774
|
-
* - `componentHasError`: undefined (property only) (readonly)
|
|
1775
|
-
* - `errorText`: undefined (property only) (readonly)
|
|
1776
|
-
*
|
|
1777
|
-
* ## Slots
|
|
1778
|
-
*
|
|
1779
|
-
* Areas where markup can be added to the component.
|
|
1780
|
-
*
|
|
1781
|
-
* - `(default)`: For single sliders place a `<w-slider-thumb>` in the default slot.
|
|
1782
|
-
* - `label`: Label for the slider or range slider as a whole.
|
|
1783
|
-
* - `description`: Optional description between the label and slider.
|
|
1784
|
-
* - `from`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
|
|
1785
|
-
* - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
|
|
1786
|
-
*/
|
|
1787
|
-
"w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
/**
|
|
1791
|
-
* Steps are used to show progress through a process or to guide users through a multi-step task.
|
|
1792
|
-
*
|
|
1793
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
|
|
1794
|
-
*
|
|
1795
|
-
* ## Attributes & Properties
|
|
1796
|
-
*
|
|
1797
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1798
|
-
*
|
|
1799
|
-
* - `horizontal`: undefined
|
|
1800
|
-
* - `right`: undefined
|
|
1801
|
-
*
|
|
1802
|
-
* ## Methods
|
|
1803
|
-
*
|
|
1804
|
-
* Methods that can be called to access component functionality.
|
|
1805
|
-
*
|
|
1806
|
-
* - `updateStepsContext() => void`: undefined
|
|
1807
|
-
*/
|
|
1808
|
-
"w-step-indicator": Partial<WarpStepIndicatorProps & BaseProps<WarpStepIndicator> & BaseEvents>;
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
/**
|
|
1812
|
-
* Individual step component that shows a single step in a process
|
|
1813
|
-
*
|
|
1814
|
-
* ## Attributes & Properties
|
|
1815
|
-
*
|
|
1816
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1817
|
-
*
|
|
1818
|
-
* - `active`: undefined
|
|
1819
|
-
* - `completed`: undefined
|
|
1820
|
-
*
|
|
1821
|
-
* ## Methods
|
|
1822
|
-
*
|
|
1823
|
-
* Methods that can be called to access component functionality.
|
|
1824
|
-
*
|
|
1825
|
-
* - `setContext(context: StepsContext) => void`: undefined
|
|
1826
|
-
* - `getAriaLabel() => void`: undefined
|
|
1827
|
-
*/
|
|
1828
|
-
"w-step": Partial<WarpStepProps & BaseProps<WarpStep> & BaseEvents>;
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
1145
|
/**
|
|
1832
1146
|
*
|
|
1833
1147
|
*
|
|
@@ -1856,79 +1170,37 @@ export type WarpTextareaProps = {
|
|
|
1856
1170
|
|
|
1857
1171
|
|
|
1858
1172
|
/**
|
|
1859
|
-
*
|
|
1860
|
-
*
|
|
1861
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
|
|
1862
|
-
*
|
|
1863
|
-
* ## Attributes & Properties
|
|
1864
|
-
*
|
|
1865
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1866
|
-
*
|
|
1867
|
-
* - `name`: undefined
|
|
1868
|
-
* - `label`: undefined
|
|
1869
|
-
* - `active`: undefined
|
|
1870
|
-
* - `over`: undefined
|
|
1871
|
-
* - `tab-class`/`tabClass`: undefined
|
|
1872
|
-
*/
|
|
1873
|
-
"w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
/**
|
|
1877
|
-
* Tabs are used to organize content by grouping similar information on the same page.
|
|
1878
|
-
*
|
|
1879
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
|
|
1880
|
-
*
|
|
1881
|
-
* ## Attributes & Properties
|
|
1882
|
-
*
|
|
1883
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1884
|
-
*
|
|
1885
|
-
* - `active`: undefined
|
|
1886
|
-
* - `tab-class`/`tabClass`: undefined
|
|
1887
|
-
* - `tabs`: undefined (property only) (readonly)
|
|
1888
|
-
* - `activeTab`: undefined (property only) (readonly)
|
|
1889
|
-
*
|
|
1890
|
-
* ## Events
|
|
1891
|
-
*
|
|
1892
|
-
* Events that will be emitted by the component.
|
|
1893
|
-
*
|
|
1894
|
-
* - `change`: undefined
|
|
1895
|
-
*/
|
|
1896
|
-
"w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
/**
|
|
1900
|
-
* A single line text input element.
|
|
1173
|
+
* A combobox element for text input with selectable options.
|
|
1901
1174
|
*
|
|
1902
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-
|
|
1175
|
+
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
|
|
1903
1176
|
*
|
|
1904
1177
|
* ## Attributes & Properties
|
|
1905
1178
|
*
|
|
1906
1179
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1907
1180
|
*
|
|
1908
|
-
* - `
|
|
1909
|
-
* - `
|
|
1910
|
-
* - `
|
|
1911
|
-
* - `
|
|
1912
|
-
* - `
|
|
1913
|
-
* - `
|
|
1914
|
-
* - `
|
|
1915
|
-
* - `
|
|
1916
|
-
* - `
|
|
1917
|
-
* - `
|
|
1918
|
-
* - `
|
|
1919
|
-
* - `
|
|
1920
|
-
* - `optional`:
|
|
1921
|
-
* - `
|
|
1922
|
-
* - `
|
|
1181
|
+
* - `options`: The available options to select from
|
|
1182
|
+
* - `label`: Label above input
|
|
1183
|
+
* - `placeholder`: Input placeholder
|
|
1184
|
+
* - `value`: The input value
|
|
1185
|
+
* - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
|
|
1186
|
+
* - `select-on-blur`/`selectOnBlur`: Select active option on blur
|
|
1187
|
+
* - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
|
|
1188
|
+
* - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
|
|
1189
|
+
* - `invalid`: Renders the input field in an invalid state
|
|
1190
|
+
* - `help-text`/`helpText`: The content to display as the help text
|
|
1191
|
+
* - `disabled`: Whether the element is disabled
|
|
1192
|
+
* - `required`: Whether the element is required
|
|
1193
|
+
* - `optional`: Whether to show optional text
|
|
1194
|
+
* - `name`: Name attribute for form submission
|
|
1195
|
+
* - `autocomplete`: Autocomplete attribute for the input field
|
|
1923
1196
|
*
|
|
1924
1197
|
* ## Methods
|
|
1925
1198
|
*
|
|
1926
1199
|
* Methods that can be called to access component functionality.
|
|
1927
1200
|
*
|
|
1928
1201
|
* - `resetFormControl() => void`: undefined
|
|
1929
|
-
* - `handler(e: InputEvent) => void`: undefined
|
|
1930
1202
|
*/
|
|
1931
|
-
"w-
|
|
1203
|
+
"w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & BaseEvents>;
|
|
1932
1204
|
}
|
|
1933
1205
|
|
|
1934
1206
|
export type CustomCssProperties = {
|