@haiilo/catalyst 0.8.0 → 0.8.3
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/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/{p-89c24fb5.entry.js → p-74fbe829.entry.js} +4 -4
- package/dist/catalyst/p-74fbe829.entry.js.map +1 -0
- package/dist/cjs/cat-alert_20.cjs.entry.js +52 -20
- package/dist/cjs/cat-alert_20.cjs.entry.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cat-select/cat-select.css +48 -2
- package/dist/collection/components/cat-select/cat-select.js +142 -20
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/components/cat-select.js +52 -14
- package/dist/components/cat-select.js.map +1 -1
- package/dist/esm/cat-alert_20.entry.js +52 -20
- package/dist/esm/cat-alert_20.entry.js.map +1 -1
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-select/cat-select.d.ts +27 -2
- package/dist/types/components.d.ts +37 -5
- package/package.json +2 -2
- package/dist/catalyst/p-89c24fb5.entry.js.map +0 -1
package/dist/esm/catalyst.js
CHANGED
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(options => {
|
|
19
19
|
globalScripts();
|
|
20
|
-
return bootstrapLazy([["cat-textarea",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_20",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"choices":[16],"
|
|
20
|
+
return bootstrapLazy([["cat-textarea",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_20",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"choices":[16],"value":[1025],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"noSearch":[4,"no-search"],"hint":[1],"hasSlottedLabel":[32],"setValue":[64],"setChoices":[64],"clearChoices":[64],"clearInput":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-tab",{"label":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
//# sourceMappingURL=catalyst.js.map
|
package/dist/esm/loader.js
CHANGED
|
@@ -14,7 +14,7 @@ const defineCustomElements = (win, options) => {
|
|
|
14
14
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
15
15
|
return patchEsm().then(() => {
|
|
16
16
|
globalScripts();
|
|
17
|
-
return bootstrapLazy([["cat-textarea",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_20",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"choices":[16],"
|
|
17
|
+
return bootstrapLazy([["cat-textarea",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_20",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"choices":[16],"value":[1025],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"noSearch":[4,"no-search"],"hint":[1],"hasSlottedLabel":[32],"setValue":[64],"setChoices":[64],"clearChoices":[64],"clearInput":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-tab",{"label":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -4,14 +4,32 @@ import { Choice, Group, Item } from 'choices.js';
|
|
|
4
4
|
* Select lets user choose one option from an options menu. Consider using
|
|
5
5
|
* select when you have 6 or more options. Select component supports any content
|
|
6
6
|
* type.
|
|
7
|
+
*
|
|
8
|
+
* @slot hint - Optional hint element to be displayed with the select.
|
|
9
|
+
* @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
|
|
10
|
+
* @part label - The label content.
|
|
7
11
|
*/
|
|
8
12
|
export declare class CatSelect {
|
|
9
13
|
private readonly i18n;
|
|
14
|
+
private readonly id;
|
|
10
15
|
private choice?;
|
|
11
16
|
private choiceInner?;
|
|
12
17
|
private selectElement?;
|
|
13
18
|
private removeElement?;
|
|
14
19
|
hostElement: HTMLElement;
|
|
20
|
+
hasSlottedLabel: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* The label for the select.
|
|
23
|
+
*/
|
|
24
|
+
label: string;
|
|
25
|
+
/**
|
|
26
|
+
* Visually hide the label, but still show it to assistive technologies like screen readers.
|
|
27
|
+
*/
|
|
28
|
+
labelHidden: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* A value is required or must be check for the form to be submittable.
|
|
31
|
+
*/
|
|
32
|
+
required: boolean;
|
|
15
33
|
/**
|
|
16
34
|
* The available options for the input.
|
|
17
35
|
*/
|
|
@@ -19,7 +37,7 @@ export declare class CatSelect {
|
|
|
19
37
|
/**
|
|
20
38
|
* The pre-selected items for the input.
|
|
21
39
|
*/
|
|
22
|
-
|
|
40
|
+
value?: string | string[] | Choice | Choice[];
|
|
23
41
|
/**
|
|
24
42
|
* Disable the select.
|
|
25
43
|
*/
|
|
@@ -42,6 +60,10 @@ export declare class CatSelect {
|
|
|
42
60
|
* Enable search for the select.
|
|
43
61
|
*/
|
|
44
62
|
noSearch: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Optional hint text(s) to be displayed with the select.
|
|
65
|
+
*/
|
|
66
|
+
hint?: string | string[];
|
|
45
67
|
/**
|
|
46
68
|
* Emitted when the value is changed.
|
|
47
69
|
*/
|
|
@@ -50,6 +72,8 @@ export declare class CatSelect {
|
|
|
50
72
|
* Emitted when the search is triggered.
|
|
51
73
|
*/
|
|
52
74
|
catSearch: EventEmitter;
|
|
75
|
+
setChoicesHandler(choices: Choice[]): void;
|
|
76
|
+
componentWillRender(): void;
|
|
53
77
|
componentDidLoad(): void;
|
|
54
78
|
disconnectedCallback(): void;
|
|
55
79
|
/**
|
|
@@ -63,7 +87,7 @@ export declare class CatSelect {
|
|
|
63
87
|
* returns array of object or promise of it), a value field name and a label
|
|
64
88
|
* field name.
|
|
65
89
|
*/
|
|
66
|
-
setChoices(choices: Array<Choice> | Array<Group>, value
|
|
90
|
+
setChoices(choices: Array<Choice> | Array<Group>, value?: string, label?: string, replaceChoices?: boolean): Promise<this>;
|
|
67
91
|
/**
|
|
68
92
|
* Clear all choices from select.
|
|
69
93
|
*/
|
|
@@ -74,6 +98,7 @@ export declare class CatSelect {
|
|
|
74
98
|
clearInput(): Promise<this>;
|
|
75
99
|
render(): any;
|
|
76
100
|
private init;
|
|
101
|
+
private get hintSection();
|
|
77
102
|
private onChange;
|
|
78
103
|
private onSearch;
|
|
79
104
|
private onChoice;
|
|
@@ -407,9 +407,17 @@ export namespace Components {
|
|
|
407
407
|
*/
|
|
408
408
|
"disabled": boolean;
|
|
409
409
|
/**
|
|
410
|
-
*
|
|
410
|
+
* Optional hint text(s) to be displayed with the select.
|
|
411
|
+
*/
|
|
412
|
+
"hint"?: string | string[];
|
|
413
|
+
/**
|
|
414
|
+
* The label for the select.
|
|
415
|
+
*/
|
|
416
|
+
"label": string;
|
|
417
|
+
/**
|
|
418
|
+
* Visually hide the label, but still show it to assistive technologies like screen readers.
|
|
411
419
|
*/
|
|
412
|
-
"
|
|
420
|
+
"labelHidden": boolean;
|
|
413
421
|
/**
|
|
414
422
|
* Enable multiple selection.
|
|
415
423
|
*/
|
|
@@ -426,14 +434,22 @@ export namespace Components {
|
|
|
426
434
|
* Whether the dropdown should appear above `(top)` or below `(bottom)` the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it.
|
|
427
435
|
*/
|
|
428
436
|
"position": 'auto' | 'top' | 'bottom';
|
|
437
|
+
/**
|
|
438
|
+
* A value is required or must be check for the form to be submittable.
|
|
439
|
+
*/
|
|
440
|
+
"required": boolean;
|
|
429
441
|
/**
|
|
430
442
|
* Set choices of select input via an array of objects (or function that returns array of object or promise of it), a value field name and a label field name.
|
|
431
443
|
*/
|
|
432
|
-
"setChoices": (choices: Array<Choice> | Array<Group>, value
|
|
444
|
+
"setChoices": (choices: Array<Choice> | Array<Group>, value?: string | undefined, label?: string | undefined, replaceChoices?: boolean | undefined) => Promise<this>;
|
|
433
445
|
/**
|
|
434
446
|
* Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the items option but can be called after initialisation.
|
|
435
447
|
*/
|
|
436
448
|
"setValue": (args: Array<string> | Array<Item>) => Promise<this>;
|
|
449
|
+
/**
|
|
450
|
+
* The pre-selected items for the input.
|
|
451
|
+
*/
|
|
452
|
+
"value"?: string | string[] | Choice | Choice[];
|
|
437
453
|
}
|
|
438
454
|
interface CatSkeleton {
|
|
439
455
|
/**
|
|
@@ -1252,9 +1268,17 @@ declare namespace LocalJSX {
|
|
|
1252
1268
|
*/
|
|
1253
1269
|
"disabled"?: boolean;
|
|
1254
1270
|
/**
|
|
1255
|
-
*
|
|
1271
|
+
* Optional hint text(s) to be displayed with the select.
|
|
1272
|
+
*/
|
|
1273
|
+
"hint"?: string | string[];
|
|
1274
|
+
/**
|
|
1275
|
+
* The label for the select.
|
|
1276
|
+
*/
|
|
1277
|
+
"label"?: string;
|
|
1278
|
+
/**
|
|
1279
|
+
* Visually hide the label, but still show it to assistive technologies like screen readers.
|
|
1256
1280
|
*/
|
|
1257
|
-
"
|
|
1281
|
+
"labelHidden"?: boolean;
|
|
1258
1282
|
/**
|
|
1259
1283
|
* Enable multiple selection.
|
|
1260
1284
|
*/
|
|
@@ -1279,6 +1303,14 @@ declare namespace LocalJSX {
|
|
|
1279
1303
|
* Whether the dropdown should appear above `(top)` or below `(bottom)` the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it.
|
|
1280
1304
|
*/
|
|
1281
1305
|
"position"?: 'auto' | 'top' | 'bottom';
|
|
1306
|
+
/**
|
|
1307
|
+
* A value is required or must be check for the form to be submittable.
|
|
1308
|
+
*/
|
|
1309
|
+
"required"?: boolean;
|
|
1310
|
+
/**
|
|
1311
|
+
* The pre-selected items for the input.
|
|
1312
|
+
*/
|
|
1313
|
+
"value"?: string | string[] | Choice | Choice[];
|
|
1282
1314
|
}
|
|
1283
1315
|
interface CatSkeleton {
|
|
1284
1316
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haiilo/catalyst",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.3",
|
|
4
4
|
"description": "Catalyst Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@floating-ui/dom": "0.4.1",
|
|
46
|
-
"@haiilo/catalyst-tokens": "0.8.
|
|
46
|
+
"@haiilo/catalyst-tokens": "0.8.3",
|
|
47
47
|
"@stencil/core": "2.17.0",
|
|
48
48
|
"autosize": "5.0.1",
|
|
49
49
|
"choices.js": "10.1.0",
|