@nuralyui/select 0.0.5 → 0.1.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/bundle.js +755 -0
- package/index.d.ts +15 -0
- package/index.js +18 -0
- package/index.js.map +1 -1
- package/package.json +29 -3
- package/react.d.ts +12 -1
- package/react.js +13 -2
- package/react.js.map +1 -1
- package/select.component.d.ts +305 -20
- package/select.component.js +614 -137
- package/select.component.js.map +1 -1
- package/select.constant.d.ts +130 -0
- package/select.constant.js +133 -0
- package/select.constant.js.map +1 -1
- package/select.style.js +348 -158
- package/select.style.js.map +1 -1
- package/select.style.variables.d.ts +6 -0
- package/select.style.variables.js +89 -0
- package/select.style.variables.js.map +1 -0
- package/select.types.d.ts +86 -10
- package/select.types.js +66 -16
- package/select.types.js.map +1 -1
- package/demo/select-demo.d.ts +0 -25
- package/demo/select-demo.d.ts.map +0 -1
- package/demo/select-demo.js +0 -254
- package/demo/select-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/react.d.ts.map +0 -1
- package/select.component.d.ts.map +0 -1
- package/select.constant.d.ts.map +0 -1
- package/select.style.d.ts.map +0 -1
- package/select.types.d.ts.map +0 -1
- package/test/select_test.d.ts +0 -2
- package/test/select_test.d.ts.map +0 -1
- package/test/select_test.js +0 -132
- package/test/select_test.js.map +0 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* CSS custom properties for select component (light theme defaults)
|
|
4
|
+
* These are the local component defaults that can be overridden globally
|
|
5
|
+
*/
|
|
6
|
+
export const selectVariables = css `
|
|
7
|
+
:host {
|
|
8
|
+
/* Layout and sizing */
|
|
9
|
+
--hybrid-select-local-width: 300px;
|
|
10
|
+
--hybrid-select-local-min-height: 40px;
|
|
11
|
+
--hybrid-select-local-padding-left: 12px;
|
|
12
|
+
--hybrid-select-local-padding-right: 12px;
|
|
13
|
+
--hybrid-select-local-border-radius: 6px;
|
|
14
|
+
--hybrid-select-local-border-width: 1px;
|
|
15
|
+
|
|
16
|
+
/* Colors - Light theme defaults */
|
|
17
|
+
--hybrid-select-local-background-color: #ffffff;
|
|
18
|
+
--hybrid-select-local-border-color: #d9d9d9;
|
|
19
|
+
--hybrid-select-local-text-color: #262626;
|
|
20
|
+
--hybrid-select-local-placeholder-color: #8c8c8c;
|
|
21
|
+
--hybrid-select-local-hover-border-color: #1677ff;
|
|
22
|
+
--hybrid-select-local-focus-border-color: #1677ff;
|
|
23
|
+
--hybrid-select-local-error-border-color: #da1e28;
|
|
24
|
+
--hybrid-select-local-warning-border-color: #f0c300;
|
|
25
|
+
--hybrid-select-local-success-border-color: #52c41a;
|
|
26
|
+
|
|
27
|
+
/* Dropdown colors */
|
|
28
|
+
--hybrid-select-local-dropdown-background: #ffffff;
|
|
29
|
+
--hybrid-select-local-dropdown-border-color: #d9d9d9;
|
|
30
|
+
--hybrid-select-local-dropdown-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08);
|
|
31
|
+
--hybrid-select-local-option-hover-background: #f5f5f5;
|
|
32
|
+
--hybrid-select-local-option-selected-background: #e6f7ff;
|
|
33
|
+
--hybrid-select-local-option-selected-color: #1677ff;
|
|
34
|
+
|
|
35
|
+
/* Typography */
|
|
36
|
+
--hybrid-select-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
|
|
37
|
+
--hybrid-select-local-font-size: 14px;
|
|
38
|
+
--hybrid-select-local-line-height: 1.5;
|
|
39
|
+
--hybrid-select-local-placeholder-font-size: 14px;
|
|
40
|
+
--hybrid-select-local-option-font-size: 14px;
|
|
41
|
+
|
|
42
|
+
/* Icon settings */
|
|
43
|
+
--hybrid-select-local-icon-size: 16px;
|
|
44
|
+
--hybrid-select-local-icon-color: #8c8c8c;
|
|
45
|
+
--hybrid-select-local-icon-hover-color: #1677ff;
|
|
46
|
+
--hybrid-select-local-arrow-icon-size: 12px;
|
|
47
|
+
|
|
48
|
+
/* Sizes */
|
|
49
|
+
--hybrid-select-local-small-height: 24px;
|
|
50
|
+
--hybrid-select-local-small-font-size: 12px;
|
|
51
|
+
--hybrid-select-local-small-padding: 4px 8px;
|
|
52
|
+
|
|
53
|
+
--hybrid-select-local-medium-height: 32px;
|
|
54
|
+
--hybrid-select-local-medium-font-size: 14px;
|
|
55
|
+
--hybrid-select-local-medium-padding: 4px 12px;
|
|
56
|
+
|
|
57
|
+
--hybrid-select-local-large-height: 40px;
|
|
58
|
+
--hybrid-select-local-large-font-size: 16px;
|
|
59
|
+
--hybrid-select-local-large-padding: 6px 12px;
|
|
60
|
+
|
|
61
|
+
/* States */
|
|
62
|
+
--hybrid-select-local-disabled-opacity: 0.5;
|
|
63
|
+
--hybrid-select-local-disabled-background: #f5f5f5;
|
|
64
|
+
--hybrid-select-local-disabled-border-color: #d9d9d9;
|
|
65
|
+
--hybrid-select-local-disabled-text-color: #8c8c8c;
|
|
66
|
+
|
|
67
|
+
/* Animation and transitions */
|
|
68
|
+
--hybrid-select-local-transition-duration: 0.2s;
|
|
69
|
+
--hybrid-select-local-transition-timing: ease-in-out;
|
|
70
|
+
--hybrid-select-local-dropdown-animation-duration: 0.15s;
|
|
71
|
+
|
|
72
|
+
/* Multi-select specific */
|
|
73
|
+
--hybrid-select-local-tag-background: #f0f0f0;
|
|
74
|
+
--hybrid-select-local-tag-color: #262626;
|
|
75
|
+
--hybrid-select-local-tag-border-radius: 4px;
|
|
76
|
+
--hybrid-select-local-tag-padding: 2px 6px;
|
|
77
|
+
--hybrid-select-local-tag-margin: 2px;
|
|
78
|
+
--hybrid-select-local-tag-close-color: #8c8c8c;
|
|
79
|
+
--hybrid-select-local-tag-close-hover-color: #da1e28;
|
|
80
|
+
|
|
81
|
+
/* Validation message */
|
|
82
|
+
--hybrid-select-local-message-font-size: 12px;
|
|
83
|
+
--hybrid-select-local-message-margin-top: 4px;
|
|
84
|
+
--hybrid-select-local-error-message-color: #da1e28;
|
|
85
|
+
--hybrid-select-local-warning-message-color: #f0c300;
|
|
86
|
+
--hybrid-select-local-success-message-color: #52c41a;
|
|
87
|
+
}
|
|
88
|
+
`;
|
|
89
|
+
//# sourceMappingURL=select.style.variables.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.style.variables.js","sourceRoot":"","sources":["../../../src/components/select/select.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * CSS custom properties for select component (light theme defaults)\n * These are the local component defaults that can be overridden globally\n */\nexport const selectVariables = css`\n :host {\n /* Layout and sizing */\n --hybrid-select-local-width: 300px;\n --hybrid-select-local-min-height: 40px;\n --hybrid-select-local-padding-left: 12px;\n --hybrid-select-local-padding-right: 12px;\n --hybrid-select-local-border-radius: 6px;\n --hybrid-select-local-border-width: 1px;\n \n /* Colors - Light theme defaults */\n --hybrid-select-local-background-color: #ffffff;\n --hybrid-select-local-border-color: #d9d9d9;\n --hybrid-select-local-text-color: #262626;\n --hybrid-select-local-placeholder-color: #8c8c8c;\n --hybrid-select-local-hover-border-color: #1677ff;\n --hybrid-select-local-focus-border-color: #1677ff;\n --hybrid-select-local-error-border-color: #da1e28;\n --hybrid-select-local-warning-border-color: #f0c300;\n --hybrid-select-local-success-border-color: #52c41a;\n \n /* Dropdown colors */\n --hybrid-select-local-dropdown-background: #ffffff;\n --hybrid-select-local-dropdown-border-color: #d9d9d9;\n --hybrid-select-local-dropdown-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08);\n --hybrid-select-local-option-hover-background: #f5f5f5;\n --hybrid-select-local-option-selected-background: #e6f7ff;\n --hybrid-select-local-option-selected-color: #1677ff;\n \n /* Typography */\n --hybrid-select-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif;\n --hybrid-select-local-font-size: 14px;\n --hybrid-select-local-line-height: 1.5;\n --hybrid-select-local-placeholder-font-size: 14px;\n --hybrid-select-local-option-font-size: 14px;\n \n /* Icon settings */\n --hybrid-select-local-icon-size: 16px;\n --hybrid-select-local-icon-color: #8c8c8c;\n --hybrid-select-local-icon-hover-color: #1677ff;\n --hybrid-select-local-arrow-icon-size: 12px;\n \n /* Sizes */\n --hybrid-select-local-small-height: 24px;\n --hybrid-select-local-small-font-size: 12px;\n --hybrid-select-local-small-padding: 4px 8px;\n \n --hybrid-select-local-medium-height: 32px;\n --hybrid-select-local-medium-font-size: 14px;\n --hybrid-select-local-medium-padding: 4px 12px;\n \n --hybrid-select-local-large-height: 40px;\n --hybrid-select-local-large-font-size: 16px;\n --hybrid-select-local-large-padding: 6px 12px;\n \n /* States */\n --hybrid-select-local-disabled-opacity: 0.5;\n --hybrid-select-local-disabled-background: #f5f5f5;\n --hybrid-select-local-disabled-border-color: #d9d9d9;\n --hybrid-select-local-disabled-text-color: #8c8c8c;\n \n /* Animation and transitions */\n --hybrid-select-local-transition-duration: 0.2s;\n --hybrid-select-local-transition-timing: ease-in-out;\n --hybrid-select-local-dropdown-animation-duration: 0.15s;\n \n /* Multi-select specific */\n --hybrid-select-local-tag-background: #f0f0f0;\n --hybrid-select-local-tag-color: #262626;\n --hybrid-select-local-tag-border-radius: 4px;\n --hybrid-select-local-tag-padding: 2px 6px;\n --hybrid-select-local-tag-margin: 2px;\n --hybrid-select-local-tag-close-color: #8c8c8c;\n --hybrid-select-local-tag-close-hover-color: #da1e28;\n \n /* Validation message */\n --hybrid-select-local-message-font-size: 12px;\n --hybrid-select-local-message-margin-top: 4px;\n --hybrid-select-local-error-message-color: #da1e28;\n --hybrid-select-local-warning-message-color: #f0c300;\n --hybrid-select-local-success-message-color: #52c41a;\n }\n`;\n"]}
|
package/select.types.d.ts
CHANGED
|
@@ -1,24 +1,100 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Configuration interface for select options with comprehensive properties
|
|
3
|
+
*/
|
|
4
|
+
export interface SelectOption {
|
|
5
|
+
/** Unique value for the option */
|
|
3
6
|
value: string;
|
|
4
|
-
|
|
7
|
+
/** Display text for the option */
|
|
8
|
+
label: string;
|
|
9
|
+
/** Optional icon name to display with the option */
|
|
10
|
+
icon?: string;
|
|
11
|
+
/** Whether the option is disabled and cannot be selected */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Validation state of the option */
|
|
14
|
+
state?: SelectState;
|
|
15
|
+
/** Optional message to display with the option */
|
|
16
|
+
message?: string;
|
|
17
|
+
/** HTML content to render instead of plain text label */
|
|
18
|
+
htmlContent?: string;
|
|
19
|
+
/** Custom CSS class to apply to the option */
|
|
20
|
+
className?: string;
|
|
21
|
+
/** Inline CSS styles for the option */
|
|
22
|
+
style?: string;
|
|
23
|
+
/** Tooltip text shown on hover */
|
|
24
|
+
title?: string;
|
|
25
|
+
/** Custom HTML ID for the option */
|
|
26
|
+
id?: string;
|
|
27
|
+
/** Group name for option grouping */
|
|
28
|
+
group?: string;
|
|
29
|
+
/** Additional descriptive text below the label */
|
|
30
|
+
description?: string;
|
|
5
31
|
}
|
|
6
|
-
|
|
32
|
+
/**
|
|
33
|
+
* Select state for validation and visual feedback
|
|
34
|
+
*/
|
|
35
|
+
export declare type SelectState = 'error' | 'warning' | 'success';
|
|
36
|
+
/**
|
|
37
|
+
* Select component type variants
|
|
38
|
+
*/
|
|
39
|
+
export declare enum SelectType {
|
|
7
40
|
Default = "default",
|
|
8
|
-
Inline = "inline"
|
|
41
|
+
Inline = "inline",
|
|
42
|
+
Button = "button",
|
|
43
|
+
Slot = "slot"
|
|
9
44
|
}
|
|
10
|
-
|
|
45
|
+
/**
|
|
46
|
+
* Select status/state enum
|
|
47
|
+
*/
|
|
48
|
+
export declare enum SelectStatus {
|
|
49
|
+
Default = "default",
|
|
11
50
|
Warning = "warning",
|
|
12
51
|
Error = "error",
|
|
13
|
-
|
|
52
|
+
Success = "success"
|
|
14
53
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
54
|
+
/**
|
|
55
|
+
* Select component size variants
|
|
56
|
+
*/
|
|
57
|
+
export declare enum SelectSize {
|
|
58
|
+
Small = "small",
|
|
59
|
+
Medium = "medium",
|
|
60
|
+
Large = "large"
|
|
18
61
|
}
|
|
19
62
|
export declare enum OptionSize {
|
|
20
63
|
Small = "small",
|
|
21
64
|
Medium = "medium",
|
|
22
65
|
Large = "large"
|
|
23
66
|
}
|
|
67
|
+
/**
|
|
68
|
+
* Select component direction for layout
|
|
69
|
+
*/
|
|
70
|
+
export declare enum SelectDirection {
|
|
71
|
+
Horizontal = "horizontal",
|
|
72
|
+
Vertical = "vertical"
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Select component variant styles
|
|
76
|
+
*/
|
|
77
|
+
export declare enum SelectVariant {
|
|
78
|
+
Default = "default",
|
|
79
|
+
Solid = "solid",
|
|
80
|
+
Outline = "outline",
|
|
81
|
+
Borderless = "borderless"
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Dropdown placement options
|
|
85
|
+
*/
|
|
86
|
+
export declare enum DropdownPlacement {
|
|
87
|
+
Bottom = "bottom",
|
|
88
|
+
Top = "top",
|
|
89
|
+
Auto = "auto"
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Search mode for filterable selects
|
|
93
|
+
*/
|
|
94
|
+
export declare enum SearchMode {
|
|
95
|
+
None = "none",
|
|
96
|
+
StartsWith = "starts-with",
|
|
97
|
+
Contains = "contains",
|
|
98
|
+
Fuzzy = "fuzzy"
|
|
99
|
+
}
|
|
24
100
|
//# sourceMappingURL=select.types.d.ts.map
|
package/select.types.js
CHANGED
|
@@ -1,23 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Select component type variants
|
|
3
|
+
*/
|
|
4
|
+
export var SelectType;
|
|
5
|
+
(function (SelectType) {
|
|
6
|
+
SelectType["Default"] = "default";
|
|
7
|
+
SelectType["Inline"] = "inline";
|
|
8
|
+
SelectType["Button"] = "button";
|
|
9
|
+
SelectType["Slot"] = "slot";
|
|
10
|
+
})(SelectType || (SelectType = {}));
|
|
11
|
+
/**
|
|
12
|
+
* Select status/state enum
|
|
13
|
+
*/
|
|
14
|
+
export var SelectStatus;
|
|
15
|
+
(function (SelectStatus) {
|
|
16
|
+
SelectStatus["Default"] = "default";
|
|
17
|
+
SelectStatus["Warning"] = "warning";
|
|
18
|
+
SelectStatus["Error"] = "error";
|
|
19
|
+
SelectStatus["Success"] = "success";
|
|
20
|
+
})(SelectStatus || (SelectStatus = {}));
|
|
21
|
+
/**
|
|
22
|
+
* Select component size variants
|
|
23
|
+
*/
|
|
24
|
+
export var SelectSize;
|
|
25
|
+
(function (SelectSize) {
|
|
26
|
+
SelectSize["Small"] = "small";
|
|
27
|
+
SelectSize["Medium"] = "medium";
|
|
28
|
+
SelectSize["Large"] = "large";
|
|
29
|
+
})(SelectSize || (SelectSize = {}));
|
|
17
30
|
export var OptionSize;
|
|
18
31
|
(function (OptionSize) {
|
|
19
32
|
OptionSize["Small"] = "small";
|
|
20
33
|
OptionSize["Medium"] = "medium";
|
|
21
34
|
OptionSize["Large"] = "large";
|
|
22
35
|
})(OptionSize || (OptionSize = {}));
|
|
36
|
+
/**
|
|
37
|
+
* Select component direction for layout
|
|
38
|
+
*/
|
|
39
|
+
export var SelectDirection;
|
|
40
|
+
(function (SelectDirection) {
|
|
41
|
+
SelectDirection["Horizontal"] = "horizontal";
|
|
42
|
+
SelectDirection["Vertical"] = "vertical";
|
|
43
|
+
})(SelectDirection || (SelectDirection = {}));
|
|
44
|
+
/**
|
|
45
|
+
* Select component variant styles
|
|
46
|
+
*/
|
|
47
|
+
export var SelectVariant;
|
|
48
|
+
(function (SelectVariant) {
|
|
49
|
+
SelectVariant["Default"] = "default";
|
|
50
|
+
SelectVariant["Solid"] = "solid";
|
|
51
|
+
SelectVariant["Outline"] = "outline";
|
|
52
|
+
SelectVariant["Borderless"] = "borderless";
|
|
53
|
+
})(SelectVariant || (SelectVariant = {}));
|
|
54
|
+
/**
|
|
55
|
+
* Dropdown placement options
|
|
56
|
+
*/
|
|
57
|
+
export var DropdownPlacement;
|
|
58
|
+
(function (DropdownPlacement) {
|
|
59
|
+
DropdownPlacement["Bottom"] = "bottom";
|
|
60
|
+
DropdownPlacement["Top"] = "top";
|
|
61
|
+
DropdownPlacement["Auto"] = "auto";
|
|
62
|
+
})(DropdownPlacement || (DropdownPlacement = {}));
|
|
63
|
+
/**
|
|
64
|
+
* Search mode for filterable selects
|
|
65
|
+
*/
|
|
66
|
+
export var SearchMode;
|
|
67
|
+
(function (SearchMode) {
|
|
68
|
+
SearchMode["None"] = "none";
|
|
69
|
+
SearchMode["StartsWith"] = "starts-with";
|
|
70
|
+
SearchMode["Contains"] = "contains";
|
|
71
|
+
SearchMode["Fuzzy"] = "fuzzy";
|
|
72
|
+
})(SearchMode || (SearchMode = {}));
|
|
23
73
|
//# sourceMappingURL=select.types.js.map
|
package/select.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.types.js","sourceRoot":"","sources":["../../../src/components/select/select.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"select.types.js","sourceRoot":"","sources":["../../../src/components/select/select.types.ts"],"names":[],"mappings":"AAkDA;;GAEG;AACH,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,+BAAiB,CAAA;IACjB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACf,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,mCAAmB,CAAA;AACrB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AACjB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AACD,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AACjB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,4CAAyB,CAAA;IACzB,wCAAqB,CAAA;AACvB,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,gCAAe,CAAA;IACf,oCAAmB,CAAA;IACnB,0CAAyB,CAAA;AAC3B,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,sCAAiB,CAAA;IACjB,gCAAW,CAAA;IACX,kCAAa,CAAA;AACf,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,2BAAa,CAAA;IACb,wCAA0B,CAAA;IAC1B,mCAAqB,CAAA;IACrB,6BAAe,CAAA;AACjB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["/**\n * Configuration interface for select options with comprehensive properties\n */\nexport interface SelectOption {\n /** Unique value for the option */\n value: string;\n \n /** Display text for the option */\n label: string;\n \n /** Optional icon name to display with the option */\n icon?: string;\n \n /** Whether the option is disabled and cannot be selected */\n disabled?: boolean;\n \n /** Validation state of the option */\n state?: SelectState;\n \n /** Optional message to display with the option */\n message?: string;\n \n /** HTML content to render instead of plain text label */\n htmlContent?: string;\n \n /** Custom CSS class to apply to the option */\n className?: string;\n \n /** Inline CSS styles for the option */\n style?: string;\n \n /** Tooltip text shown on hover */\n title?: string;\n \n /** Custom HTML ID for the option */\n id?: string;\n \n /** Group name for option grouping */\n group?: string;\n \n /** Additional descriptive text below the label */\n description?: string;\n \n}\n\n/**\n * Select state for validation and visual feedback\n */\nexport type SelectState = 'error' | 'warning' | 'success';\n\n/**\n * Select component type variants\n */\nexport enum SelectType {\n Default = 'default',\n Inline = 'inline',\n Button = 'button',\n Slot = 'slot',\n}\n\n/**\n * Select status/state enum\n */\nexport enum SelectStatus {\n Default = 'default',\n Warning = 'warning',\n Error = 'error',\n Success = 'success',\n}\n\n/**\n * Select component size variants\n */\nexport enum SelectSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\nexport enum OptionSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\n/**\n * Select component direction for layout\n */\nexport enum SelectDirection {\n Horizontal = 'horizontal',\n Vertical = 'vertical',\n}\n\n/**\n * Select component variant styles\n */\nexport enum SelectVariant {\n Default = 'default',\n Solid = 'solid',\n Outline = 'outline',\n Borderless = 'borderless',\n}\n\n/**\n * Dropdown placement options\n */\nexport enum DropdownPlacement {\n Bottom = 'bottom',\n Top = 'top',\n Auto = 'auto',\n}\n\n/**\n * Search mode for filterable selects\n */\nexport enum SearchMode {\n None = 'none',\n StartsWith = 'starts-with',\n Contains = 'contains',\n Fuzzy = 'fuzzy',\n}\n"]}
|
package/demo/select-demo.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
import { LitElement } from 'lit';
|
|
7
|
-
import '../select.component';
|
|
8
|
-
import '../../dropdown/hy-dropdown.component';
|
|
9
|
-
import '../../button/nr-button.component';
|
|
10
|
-
import '../../tabs/tabs.component';
|
|
11
|
-
import '../../input/input.component';
|
|
12
|
-
export declare class SlectDemoElement extends LitElement {
|
|
13
|
-
options: {
|
|
14
|
-
value: string;
|
|
15
|
-
label: string;
|
|
16
|
-
}[];
|
|
17
|
-
selectedOptions: never[];
|
|
18
|
-
render(): import("lit").TemplateResult<1>;
|
|
19
|
-
}
|
|
20
|
-
declare global {
|
|
21
|
-
interface HTMLElementTagNameMap {
|
|
22
|
-
'hy-select-demo': SlectDemoElement;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
//# sourceMappingURL=select-demo.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/select/demo/select-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sCAAsC,CAAC;AAC9C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AAErC,qBACa,gBAAiB,SAAQ,UAAU;IAE9C,OAAO;;;QAQL;IAGF,eAAe,UAAM;IACZ,MAAM;CAgNhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,gBAAgB,CAAC;KACpC;CACF"}
|
package/demo/select-demo.js
DELETED
|
@@ -1,254 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
-
/**
|
|
4
|
-
* @license
|
|
5
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
6
|
-
* SPDX-License-Identifier: MIT
|
|
7
|
-
*/
|
|
8
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
9
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
10
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
11
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
12
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
13
|
-
};
|
|
14
|
-
import { LitElement, html } from 'lit';
|
|
15
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
16
|
-
import '../select.component';
|
|
17
|
-
import '../../dropdown/hy-dropdown.component';
|
|
18
|
-
import '../../button/nr-button.component';
|
|
19
|
-
import '../../tabs/tabs.component';
|
|
20
|
-
import '../../input/input.component';
|
|
21
|
-
let SlectDemoElement = class SlectDemoElement extends LitElement {
|
|
22
|
-
constructor() {
|
|
23
|
-
super(...arguments);
|
|
24
|
-
this.options = [
|
|
25
|
-
{ value: 'abuja', label: 'Abuja' },
|
|
26
|
-
{ value: 'duplin', label: 'Duplin' },
|
|
27
|
-
{ value: 'nairobi', label: 'Nairobi' },
|
|
28
|
-
{ value: 'beirut', label: 'Beirut' },
|
|
29
|
-
{ value: 'prague', label: 'Prague' },
|
|
30
|
-
{ value: 'marrakech', label: 'Marrakech' },
|
|
31
|
-
{ value: 'buenos aires', label: 'Buenos Aires' },
|
|
32
|
-
];
|
|
33
|
-
this.selectedOptions = [];
|
|
34
|
-
}
|
|
35
|
-
render() {
|
|
36
|
-
return html `
|
|
37
|
-
<h3>Default: single selection without default values</h3>
|
|
38
|
-
<hy-select
|
|
39
|
-
.options=${this.options}
|
|
40
|
-
@changed=${(e) => {
|
|
41
|
-
this.selectedOptions = e.detail.value;
|
|
42
|
-
console.log(this.selectedOptions);
|
|
43
|
-
}}
|
|
44
|
-
>
|
|
45
|
-
</hy-select>
|
|
46
|
-
<br /><br />
|
|
47
|
-
<br /><br />
|
|
48
|
-
|
|
49
|
-
<hr />
|
|
50
|
-
<br /><br />
|
|
51
|
-
<h3>single selection with default values</h3>
|
|
52
|
-
|
|
53
|
-
<hy-select
|
|
54
|
-
.options=${this.options}
|
|
55
|
-
.defaultSelected="${['Duplin']}"
|
|
56
|
-
@changed=${(e) => {
|
|
57
|
-
this.selectedOptions = e.detail.value;
|
|
58
|
-
console.log(this.selectedOptions);
|
|
59
|
-
}}
|
|
60
|
-
>
|
|
61
|
-
</hy-select>
|
|
62
|
-
<br /><br />
|
|
63
|
-
<br /><br />
|
|
64
|
-
|
|
65
|
-
<hr />
|
|
66
|
-
<br /><br />
|
|
67
|
-
<h3>Disabled</h3>
|
|
68
|
-
|
|
69
|
-
<hy-select
|
|
70
|
-
.options=${this.options}
|
|
71
|
-
.disabled=${true}
|
|
72
|
-
@changed=${(e) => {
|
|
73
|
-
this.selectedOptions = e.detail.value;
|
|
74
|
-
console.log(this.selectedOptions);
|
|
75
|
-
}}
|
|
76
|
-
>
|
|
77
|
-
<span slot="label">disabled input</span>
|
|
78
|
-
<span slot="helper-text">helper</span>
|
|
79
|
-
</hy-select>
|
|
80
|
-
|
|
81
|
-
<br /><br />
|
|
82
|
-
<br /><br />
|
|
83
|
-
<hr />
|
|
84
|
-
<br /><br />
|
|
85
|
-
<h3>Multiple selection without default values</h3>
|
|
86
|
-
|
|
87
|
-
<hy-select
|
|
88
|
-
selectionMode="multiple"
|
|
89
|
-
.options=${this.options}
|
|
90
|
-
@changed=${(e) => {
|
|
91
|
-
this.selectedOptions = e.detail.value;
|
|
92
|
-
console.log(this.selectedOptions);
|
|
93
|
-
}}
|
|
94
|
-
>
|
|
95
|
-
<span slot="label">Selection mode: multiple</span>
|
|
96
|
-
</hy-select>
|
|
97
|
-
<br /><br />
|
|
98
|
-
<br /><br />
|
|
99
|
-
<hr />
|
|
100
|
-
<br /><br />
|
|
101
|
-
<h3>single selection with default value</h3>
|
|
102
|
-
|
|
103
|
-
<hy-select
|
|
104
|
-
.defaultSelected="${['Abuja']}"
|
|
105
|
-
.options=${this.options}
|
|
106
|
-
@changed=${(e) => {
|
|
107
|
-
this.selectedOptions = e.detail.value;
|
|
108
|
-
console.log(this.selectedOptions);
|
|
109
|
-
}}
|
|
110
|
-
>
|
|
111
|
-
<span slot="label">Selection mode: single, default selected: Abuja</span>
|
|
112
|
-
</hy-select>
|
|
113
|
-
<br /><br />
|
|
114
|
-
<br /><br />
|
|
115
|
-
<hr />
|
|
116
|
-
<br /><br />
|
|
117
|
-
<h3>Multiple selection with default values and empty placeholder</h3>
|
|
118
|
-
<hy-select
|
|
119
|
-
selectionMode="multiple"
|
|
120
|
-
placeholder=""
|
|
121
|
-
.defaultSelected="${['Abuja', 'Nairobi']}"
|
|
122
|
-
.options=${this.options}
|
|
123
|
-
@changed=${(e) => {
|
|
124
|
-
this.selectedOptions = e.detail.value;
|
|
125
|
-
console.log(this.selectedOptions);
|
|
126
|
-
}}
|
|
127
|
-
>
|
|
128
|
-
<span slot="label">Selection Mode: multiple</span>
|
|
129
|
-
</hy-select>
|
|
130
|
-
<br /><br />
|
|
131
|
-
<br /><br />
|
|
132
|
-
<hr />
|
|
133
|
-
<br /><br />
|
|
134
|
-
<h3>Default with warning status</h3>
|
|
135
|
-
<hy-select
|
|
136
|
-
status="warning"
|
|
137
|
-
.options=${this.options}
|
|
138
|
-
@changed=${(e) => {
|
|
139
|
-
this.selectedOptions = e.detail.value;
|
|
140
|
-
console.log(this.selectedOptions);
|
|
141
|
-
}}
|
|
142
|
-
>
|
|
143
|
-
<span slot="label">warning status</span>
|
|
144
|
-
</hy-select>
|
|
145
|
-
<br /><br />
|
|
146
|
-
<br /><br />
|
|
147
|
-
<h3>Disabled with warning status</h3>
|
|
148
|
-
<hy-select
|
|
149
|
-
status="warning"
|
|
150
|
-
.disabled=${true}
|
|
151
|
-
.options=${this.options}
|
|
152
|
-
@changed=${(e) => {
|
|
153
|
-
this.selectedOptions = e.detail.value;
|
|
154
|
-
console.log(this.selectedOptions);
|
|
155
|
-
}}
|
|
156
|
-
>
|
|
157
|
-
<span slot="label">warning status</span>
|
|
158
|
-
</hy-select>
|
|
159
|
-
<br /><br />
|
|
160
|
-
<br /><br />
|
|
161
|
-
<hr />
|
|
162
|
-
<br /><br />
|
|
163
|
-
<h3>Default with error status</h3>
|
|
164
|
-
<hy-select
|
|
165
|
-
status="error"
|
|
166
|
-
.options=${this.options}
|
|
167
|
-
@changed=${(e) => {
|
|
168
|
-
this.selectedOptions = e.detail.value;
|
|
169
|
-
console.log(this.selectedOptions);
|
|
170
|
-
}}
|
|
171
|
-
>
|
|
172
|
-
<span slot="label">label</span>
|
|
173
|
-
<span slot="helper-text">error status</span>
|
|
174
|
-
</hy-select>
|
|
175
|
-
<br /><br />
|
|
176
|
-
<br /><br />
|
|
177
|
-
<hr />
|
|
178
|
-
<h3>Disabledwith error status</h3>
|
|
179
|
-
<hy-select
|
|
180
|
-
.disabled=${true}
|
|
181
|
-
status="error"
|
|
182
|
-
.options=${this.options}
|
|
183
|
-
@changed=${(e) => {
|
|
184
|
-
this.selectedOptions = e.detail.value;
|
|
185
|
-
console.log(this.selectedOptions);
|
|
186
|
-
}}
|
|
187
|
-
>
|
|
188
|
-
<span slot="label">label</span>
|
|
189
|
-
<span slot="helper-text">error status</span>
|
|
190
|
-
</hy-select>
|
|
191
|
-
<br /><br />
|
|
192
|
-
<br /><br />
|
|
193
|
-
<hr />
|
|
194
|
-
<br /><br />
|
|
195
|
-
<h3>Default and type inline</h3>
|
|
196
|
-
|
|
197
|
-
<hy-select
|
|
198
|
-
type="inline"
|
|
199
|
-
.options=${this.options}
|
|
200
|
-
@changed=${(e) => {
|
|
201
|
-
this.selectedOptions = e.detail.value;
|
|
202
|
-
console.log(this.selectedOptions);
|
|
203
|
-
}}
|
|
204
|
-
>
|
|
205
|
-
<span slot="label">type inline</span>
|
|
206
|
-
<span slot="helper-text">label</span>
|
|
207
|
-
</hy-select>
|
|
208
|
-
<br /><br />
|
|
209
|
-
<br /><br />
|
|
210
|
-
|
|
211
|
-
<hr />
|
|
212
|
-
<br /><br />
|
|
213
|
-
<h3>Default with small size</h3>
|
|
214
|
-
|
|
215
|
-
<hy-select
|
|
216
|
-
size="small"
|
|
217
|
-
.options=${this.options}
|
|
218
|
-
@changed=${(e) => {
|
|
219
|
-
this.selectedOptions = e.detail.value;
|
|
220
|
-
console.log(this.selectedOptions);
|
|
221
|
-
}}
|
|
222
|
-
>
|
|
223
|
-
<span slot="label">small select</span>
|
|
224
|
-
</hy-select>
|
|
225
|
-
<br /><br />
|
|
226
|
-
<br /><br />
|
|
227
|
-
|
|
228
|
-
<hr />
|
|
229
|
-
<br /><br />
|
|
230
|
-
<h3>Default with large size</h3>
|
|
231
|
-
<hy-select
|
|
232
|
-
size="large"
|
|
233
|
-
.options=${this.options}
|
|
234
|
-
@changed=${(e) => {
|
|
235
|
-
this.selectedOptions = e.detail.value;
|
|
236
|
-
console.log(this.selectedOptions);
|
|
237
|
-
}}
|
|
238
|
-
>
|
|
239
|
-
<span slot="label">large select</span>
|
|
240
|
-
</hy-select>
|
|
241
|
-
`;
|
|
242
|
-
}
|
|
243
|
-
};
|
|
244
|
-
__decorate([
|
|
245
|
-
state()
|
|
246
|
-
], SlectDemoElement.prototype, "options", void 0);
|
|
247
|
-
__decorate([
|
|
248
|
-
state()
|
|
249
|
-
], SlectDemoElement.prototype, "selectedOptions", void 0);
|
|
250
|
-
SlectDemoElement = __decorate([
|
|
251
|
-
customElement('hy-select-demo')
|
|
252
|
-
], SlectDemoElement);
|
|
253
|
-
export { SlectDemoElement };
|
|
254
|
-
//# sourceMappingURL=select-demo.js.map
|
package/demo/select-demo.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select-demo.js","sourceRoot":"","sources":["../../../../src/components/select/demo/select-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\n\nimport '../select.component';\nimport '../../dropdown/hy-dropdown.component';\nimport '../../button/nr-button.component';\nimport '../../tabs/tabs.component';\nimport '../../input/input.component';\n\n@customElement('hy-select-demo')\nexport class SlectDemoElement extends LitElement {\n @state()\n options = [\n {value: 'abuja', label: 'Abuja'},\n {value: 'duplin', label: 'Duplin'},\n {value: 'nairobi', label: 'Nairobi'},\n {value: 'beirut', label: 'Beirut'},\n {value: 'prague', label: 'Prague'},\n {value: 'marrakech', label: 'Marrakech'},\n {value: 'buenos aires', label: 'Buenos Aires'},\n ];\n\n @state()\n selectedOptions = [];\n override render() {\n return html`\n <h3>Default: single selection without default values</h3>\n <hy-select\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>single selection with default values</h3>\n\n <hy-select\n .options=${this.options}\n .defaultSelected=\"${['Duplin']}\"\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>Disabled</h3>\n\n <hy-select\n .options=${this.options}\n .disabled=${true}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">disabled input</span>\n <span slot=\"helper-text\">helper</span>\n </hy-select>\n\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Multiple selection without default values</h3>\n\n <hy-select\n selectionMode=\"multiple\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">Selection mode: multiple</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>single selection with default value</h3>\n\n <hy-select\n .defaultSelected=\"${['Abuja']}\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">Selection mode: single, default selected: Abuja</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Multiple selection with default values and empty placeholder</h3>\n <hy-select\n selectionMode=\"multiple\"\n placeholder=\"\"\n .defaultSelected=\"${['Abuja', 'Nairobi']}\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">Selection Mode: multiple</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Default with warning status</h3>\n <hy-select\n status=\"warning\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">warning status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <h3>Disabled with warning status</h3>\n <hy-select\n status=\"warning\"\n .disabled=${true}\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">warning status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Default with error status</h3>\n <hy-select\n status=\"error\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">label</span>\n <span slot=\"helper-text\">error status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <h3>Disabledwith error status</h3>\n <hy-select\n .disabled=${true}\n status=\"error\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">label</span>\n <span slot=\"helper-text\">error status</span>\n </hy-select>\n <br /><br />\n <br /><br />\n <hr />\n <br /><br />\n <h3>Default and type inline</h3>\n\n <hy-select\n type=\"inline\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">type inline</span>\n <span slot=\"helper-text\">label</span>\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>Default with small size</h3>\n\n <hy-select\n size=\"small\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">small select</span>\n </hy-select>\n <br /><br />\n <br /><br />\n\n <hr />\n <br /><br />\n <h3>Default with large size</h3>\n <hy-select\n size=\"large\"\n .options=${this.options}\n @changed=${(e: any) => {\n this.selectedOptions = e.detail.value;\n console.log(this.selectedOptions);\n }}\n >\n <span slot=\"label\">large select</span>\n </hy-select>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-select-demo': SlectDemoElement;\n }\n}\n"]}
|
package/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
|
package/react.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,eAAO,MAAM,QAAQ;;;;;EAUnB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAC,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAKrG,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,eAAe,EAAC,MAAM,EAAE,CAAG;IAE3B,WAAW,SAAsB;IAEjC,QAAQ,UAAS;IAEjB,IAAI,aAAsB;IAE1B,aAAa,sBAA8B;IAE3C,IAAI,UAAS;IAEb,MAAM,eAAwB;IAE9B,IAAI,aAAqB;IAGzB,QAAQ,EAAE,OAAO,EAAE,CAAM;IAGzB,cAAc,EAAG,WAAW,CAAC;IAE7B,OAAO,EAAG,WAAW,CAAC;cAEH,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;YActD,aAAa;IAM3B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,MAAM;cAKK,MAAM,IAAI,OAAO;CAiErC"}
|
package/select.constant.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select.constant.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,0BAA0B,OAAO,CAAC"}
|
package/select.style.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select.style.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAyOA,eAAO,MAAM,MAAM,yBAAc,CAAC"}
|
package/select.types.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,GAAG,CAAC;CACvB;AAED,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AACD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,oBAAY,mBAAmB;IAC7B,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AACD,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}
|
package/test/select_test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select_test.d.ts","sourceRoot":"","sources":["../../../../src/components/select/test/select_test.ts"],"names":[],"mappings":"AACA,OAAO,qBAAqB,CAAC"}
|