@sula-tech/webcomponents 0.5.0 → 0.6.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.
Files changed (92) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/{sula-avatar_16.cjs.entry.js → sula-avatar_18.cjs.entry.js} +220 -50
  3. package/dist/cjs/sula-avatar_18.cjs.entry.js.map +1 -0
  4. package/dist/cjs/webcomponents.cjs.js +1 -1
  5. package/dist/collection/collection-manifest.json +2 -0
  6. package/dist/collection/components/sula-button/sula-button.css +1 -1
  7. package/dist/collection/components/sula-button/sula-button.js +66 -6
  8. package/dist/collection/components/sula-button/sula-button.js.map +1 -1
  9. package/dist/collection/components/sula-button/sula-button.stories.js +260 -97
  10. package/dist/collection/components/sula-button/sula-button.stories.js.map +1 -1
  11. package/dist/collection/components/sula-checkbox/sula-checkbox.js +3 -3
  12. package/dist/collection/components/sula-chip/sula-chip.js +3 -3
  13. package/dist/collection/components/sula-dropdown/sula-dropdown.js +4 -4
  14. package/dist/collection/components/sula-icon/sula-icon.css +1 -1
  15. package/dist/collection/components/sula-icon/sula-icon.js +1 -1
  16. package/dist/collection/components/sula-loader/sula-loader.css +1 -1
  17. package/dist/collection/components/sula-loader/sula-loader.js +1 -1
  18. package/dist/collection/components/sula-menu-select-list/sula-menu-select-list.js +1 -1
  19. package/dist/collection/components/sula-progress-bar/model/sula-progress-bar.model.js +15 -0
  20. package/dist/collection/components/sula-progress-bar/model/sula-progress-bar.model.js.map +1 -0
  21. package/dist/collection/components/sula-progress-bar/sula-progress-bar.css +1 -0
  22. package/dist/collection/components/sula-progress-bar/sula-progress-bar.js +213 -0
  23. package/dist/collection/components/sula-progress-bar/sula-progress-bar.js.map +1 -0
  24. package/dist/collection/components/sula-progress-bar/sula-progress.stories.js +172 -0
  25. package/dist/collection/components/sula-progress-bar/sula-progress.stories.js.map +1 -0
  26. package/dist/collection/components/sula-radio-button/sula-radio-button.js +2 -2
  27. package/dist/collection/components/sula-search-bar/model/sula-search.bar-model.js +6 -0
  28. package/dist/collection/components/sula-search-bar/model/sula-search.bar-model.js.map +1 -0
  29. package/dist/collection/components/sula-search-bar/sula-search-bar.css +1 -0
  30. package/dist/collection/components/sula-search-bar/sula-search-bar.js +240 -0
  31. package/dist/collection/components/sula-search-bar/sula-search-bar.js.map +1 -0
  32. package/dist/collection/components/sula-search-bar/sula-search-bar.stories.js +119 -0
  33. package/dist/collection/components/sula-search-bar/sula-search-bar.stories.js.map +1 -0
  34. package/dist/collection/components/sula-switch/sula-switch.js +4 -4
  35. package/dist/collection/components/sula-tag/sula-tag.js +3 -3
  36. package/dist/collection/components/sula-textarea/sula-textarea.js +6 -6
  37. package/dist/collection/components/sula-textfield/sula-textfield.js +2 -2
  38. package/dist/collection/components/sula-tiles/sula-tiles.js +1 -1
  39. package/dist/collection/components/sula-timeline-list/sula-timeline-list.js +1 -1
  40. package/dist/components/{p-CjYWDIHR.js → p-BNtk_d_S.js} +3 -3
  41. package/dist/components/{p-CjYWDIHR.js.map → p-BNtk_d_S.js.map} +1 -1
  42. package/dist/components/p-CYBZuKr6.js +27129 -0
  43. package/dist/components/p-CYBZuKr6.js.map +1 -0
  44. package/dist/components/{p-CYhL1fU6.js → p-DULnDBOY.js} +4 -4
  45. package/dist/components/{p-CYhL1fU6.js.map → p-DULnDBOY.js.map} +1 -1
  46. package/dist/components/sula-avatar.js +1 -1
  47. package/dist/components/sula-badge.js +1 -1
  48. package/dist/components/sula-button.js +38 -9
  49. package/dist/components/sula-button.js.map +1 -1
  50. package/dist/components/sula-checkbox.js +4 -4
  51. package/dist/components/sula-chip.js +5 -5
  52. package/dist/components/sula-dropdown.js +6 -6
  53. package/dist/components/sula-icon.js +1 -1
  54. package/dist/components/sula-loader.js +1 -27124
  55. package/dist/components/sula-loader.js.map +1 -1
  56. package/dist/components/sula-menu-select-list.js +1 -1
  57. package/dist/components/sula-progress-bar.d.ts +11 -0
  58. package/dist/components/sula-progress-bar.js +122 -0
  59. package/dist/components/sula-progress-bar.js.map +1 -0
  60. package/dist/components/sula-radio-button.js +2 -2
  61. package/dist/components/sula-search-bar.d.ts +11 -0
  62. package/dist/components/sula-search-bar.js +104 -0
  63. package/dist/components/sula-search-bar.js.map +1 -0
  64. package/dist/components/sula-switch.js +4 -4
  65. package/dist/components/sula-tag.js +4 -4
  66. package/dist/components/sula-textarea.js +6 -6
  67. package/dist/components/sula-textfield.js +3 -3
  68. package/dist/components/sula-tiles.js +2 -2
  69. package/dist/components/sula-timeline-list.js +2 -2
  70. package/dist/esm/loader.js +1 -1
  71. package/dist/esm/{sula-avatar_16.entry.js → sula-avatar_18.entry.js} +219 -51
  72. package/dist/esm/sula-avatar_18.entry.js.map +1 -0
  73. package/dist/esm/webcomponents.js +1 -1
  74. package/dist/types/components/sula-button/sula-button.d.ts +11 -1
  75. package/dist/types/components/sula-button/sula-button.stories.d.ts +124 -33
  76. package/dist/types/components/sula-progress-bar/model/sula-progress-bar.model.d.ts +12 -0
  77. package/dist/types/components/sula-progress-bar/sula-progress-bar.d.ts +33 -0
  78. package/dist/types/components/sula-progress-bar/sula-progress.stories.d.ts +84 -0
  79. package/dist/types/components/sula-search-bar/model/sula-search.bar-model.d.ts +4 -0
  80. package/dist/types/components/sula-search-bar/sula-search-bar.d.ts +50 -0
  81. package/dist/types/components/sula-search-bar/sula-search-bar.stories.d.ts +84 -0
  82. package/dist/types/components.d.ts +176 -0
  83. package/dist/webcomponents/{p-51f9d6a5.entry.js → p-2a133394.entry.js} +2788 -2538
  84. package/dist/webcomponents/{sula-avatar.sula-badge.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-radio-button.sula-switch.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.entry.esm.js.map → p-2a133394.entry.js.map} +1 -1
  85. package/dist/webcomponents/webcomponents.esm.js +33 -14
  86. package/package.json +1 -1
  87. package/readme.md +79 -19
  88. package/dist/cjs/sula-avatar.sula-badge.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-radio-button.sula-switch.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.entry.cjs.js.map +0 -1
  89. package/dist/cjs/sula-avatar_16.cjs.entry.js.map +0 -1
  90. package/dist/esm/sula-avatar.sula-badge.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-radio-button.sula-switch.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.entry.js.map +0 -1
  91. package/dist/esm/sula-avatar_16.entry.js.map +0 -1
  92. package/dist/webcomponents/p-51f9d6a5.entry.js.map +0 -1
@@ -13,6 +13,8 @@ import { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model
13
13
  import { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
14
14
  import { SulaMenuListItem as SulaMenuListItem1 } from "./components";
15
15
  import { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
16
+ import { SulaProgressBarAppearance, SulaProgressBarState } from "./components/sula-progress-bar/model/sula-progress-bar.model";
17
+ import { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
16
18
  import { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
17
19
  import { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
18
20
  import { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
@@ -27,6 +29,8 @@ export { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model
27
29
  export { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
28
30
  export { SulaMenuListItem as SulaMenuListItem1 } from "./components";
29
31
  export { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
32
+ export { SulaProgressBarAppearance, SulaProgressBarState } from "./components/sula-progress-bar/model/sula-progress-bar.model";
33
+ export { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
30
34
  export { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
31
35
  export { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
32
36
  export { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
@@ -95,11 +99,19 @@ export namespace Components {
95
99
  * Button icon when is Icon type
96
100
  */
97
101
  "icon": string;
102
+ /**
103
+ * Button left icon
104
+ */
105
+ "leftIcon": string;
98
106
  /**
99
107
  * Is button loading
100
108
  * @default false
101
109
  */
102
110
  "loading": boolean;
111
+ /**
112
+ * Button right icon
113
+ */
114
+ "rightIcon": string;
103
115
  /**
104
116
  * Button size
105
117
  * @default SulaButtonSize.Default
@@ -217,6 +229,35 @@ export namespace Components {
217
229
  */
218
230
  "items": SulaMenuListItem[];
219
231
  }
232
+ interface SulaProgressBar {
233
+ /**
234
+ * The style of the progress bar.
235
+ * @default SulaProgressBarAppearance.Primary
236
+ */
237
+ "appearance": SulaProgressBarAppearance;
238
+ /**
239
+ * The label displayed at the bottom of the progress bar.
240
+ */
241
+ "bottomLabel": string;
242
+ /**
243
+ * The progress value of the progress bar.
244
+ */
245
+ "progress": number;
246
+ /**
247
+ * Show progress
248
+ * @default true
249
+ */
250
+ "showProgress": boolean;
251
+ /**
252
+ * The state of the progress bar.
253
+ * @default SulaProgressBarState.Default
254
+ */
255
+ "state": SulaProgressBarState;
256
+ /**
257
+ * The label displayed at the top of the progress bar.
258
+ */
259
+ "topLabel": string;
260
+ }
220
261
  interface SulaRadioButton {
221
262
  /**
222
263
  * Is radio button checked
@@ -234,6 +275,29 @@ export namespace Components {
234
275
  */
235
276
  "label": string;
236
277
  }
278
+ interface SulaSearchBar {
279
+ /**
280
+ * Search bar left icon
281
+ */
282
+ "leftIcon": string;
283
+ /**
284
+ * Search bar placeholder
285
+ */
286
+ "placeholder": string;
287
+ /**
288
+ * Search bar right icon
289
+ */
290
+ "rightIcon": string;
291
+ /**
292
+ * Search bar style
293
+ * @default SulaSearchBarStyle.Default
294
+ */
295
+ "searchBarStyle": SulaSearchBarStyle;
296
+ /**
297
+ * Value for the search bar.
298
+ */
299
+ "value"?: string;
300
+ }
237
301
  interface SulaSwitch {
238
302
  /**
239
303
  * Is switch active
@@ -436,6 +500,10 @@ export interface SulaRadioButtonCustomEvent<T> extends CustomEvent<T> {
436
500
  detail: T;
437
501
  target: HTMLSulaRadioButtonElement;
438
502
  }
503
+ export interface SulaSearchBarCustomEvent<T> extends CustomEvent<T> {
504
+ detail: T;
505
+ target: HTMLSulaSearchBarElement;
506
+ }
439
507
  export interface SulaSwitchCustomEvent<T> extends CustomEvent<T> {
440
508
  detail: T;
441
509
  target: HTMLSulaSwitchElement;
@@ -572,6 +640,12 @@ declare global {
572
640
  prototype: HTMLSulaMenuSelectListElement;
573
641
  new (): HTMLSulaMenuSelectListElement;
574
642
  };
643
+ interface HTMLSulaProgressBarElement extends Components.SulaProgressBar, HTMLStencilElement {
644
+ }
645
+ var HTMLSulaProgressBarElement: {
646
+ prototype: HTMLSulaProgressBarElement;
647
+ new (): HTMLSulaProgressBarElement;
648
+ };
575
649
  interface HTMLSulaRadioButtonElementEventMap {
576
650
  "valueChanged": boolean;
577
651
  "focusedOn": void;
@@ -591,6 +665,26 @@ declare global {
591
665
  prototype: HTMLSulaRadioButtonElement;
592
666
  new (): HTMLSulaRadioButtonElement;
593
667
  };
668
+ interface HTMLSulaSearchBarElementEventMap {
669
+ "valueChanged": string;
670
+ "focusedOn": void;
671
+ "focusedOut": void;
672
+ "rightIconClicked": void;
673
+ }
674
+ interface HTMLSulaSearchBarElement extends Components.SulaSearchBar, HTMLStencilElement {
675
+ addEventListener<K extends keyof HTMLSulaSearchBarElementEventMap>(type: K, listener: (this: HTMLSulaSearchBarElement, ev: SulaSearchBarCustomEvent<HTMLSulaSearchBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
676
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
677
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
678
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
679
+ removeEventListener<K extends keyof HTMLSulaSearchBarElementEventMap>(type: K, listener: (this: HTMLSulaSearchBarElement, ev: SulaSearchBarCustomEvent<HTMLSulaSearchBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
680
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
681
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
682
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
683
+ }
684
+ var HTMLSulaSearchBarElement: {
685
+ prototype: HTMLSulaSearchBarElement;
686
+ new (): HTMLSulaSearchBarElement;
687
+ };
594
688
  interface HTMLSulaSwitchElementEventMap {
595
689
  "valueChanged": boolean;
596
690
  "focusedOn": void;
@@ -698,7 +792,9 @@ declare global {
698
792
  "sula-icon": HTMLSulaIconElement;
699
793
  "sula-loader": HTMLSulaLoaderElement;
700
794
  "sula-menu-select-list": HTMLSulaMenuSelectListElement;
795
+ "sula-progress-bar": HTMLSulaProgressBarElement;
701
796
  "sula-radio-button": HTMLSulaRadioButtonElement;
797
+ "sula-search-bar": HTMLSulaSearchBarElement;
702
798
  "sula-switch": HTMLSulaSwitchElement;
703
799
  "sula-tag": HTMLSulaTagElement;
704
800
  "sula-textarea": HTMLSulaTextareaElement;
@@ -769,6 +865,10 @@ declare namespace LocalJSX {
769
865
  * Button icon when is Icon type
770
866
  */
771
867
  "icon"?: string;
868
+ /**
869
+ * Button left icon
870
+ */
871
+ "leftIcon"?: string;
772
872
  /**
773
873
  * Is button loading
774
874
  * @default false
@@ -779,6 +879,10 @@ declare namespace LocalJSX {
779
879
  * @note If button is disabled event won't be emitted
780
880
  */
781
881
  "onButtonClicked"?: (event: SulaButtonCustomEvent<void>) => void;
882
+ /**
883
+ * Button right icon
884
+ */
885
+ "rightIcon"?: string;
782
886
  /**
783
887
  * Button size
784
888
  * @default SulaButtonSize.Default
@@ -936,6 +1040,35 @@ declare namespace LocalJSX {
936
1040
  */
937
1041
  "onItemSelected"?: (event: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => void;
938
1042
  }
1043
+ interface SulaProgressBar {
1044
+ /**
1045
+ * The style of the progress bar.
1046
+ * @default SulaProgressBarAppearance.Primary
1047
+ */
1048
+ "appearance"?: SulaProgressBarAppearance;
1049
+ /**
1050
+ * The label displayed at the bottom of the progress bar.
1051
+ */
1052
+ "bottomLabel"?: string;
1053
+ /**
1054
+ * The progress value of the progress bar.
1055
+ */
1056
+ "progress"?: number;
1057
+ /**
1058
+ * Show progress
1059
+ * @default true
1060
+ */
1061
+ "showProgress"?: boolean;
1062
+ /**
1063
+ * The state of the progress bar.
1064
+ * @default SulaProgressBarState.Default
1065
+ */
1066
+ "state"?: SulaProgressBarState;
1067
+ /**
1068
+ * The label displayed at the top of the progress bar.
1069
+ */
1070
+ "topLabel"?: string;
1071
+ }
939
1072
  interface SulaRadioButton {
940
1073
  /**
941
1074
  * Is radio button checked
@@ -965,6 +1098,45 @@ declare namespace LocalJSX {
965
1098
  */
966
1099
  "onValueChanged"?: (event: SulaRadioButtonCustomEvent<boolean>) => void;
967
1100
  }
1101
+ interface SulaSearchBar {
1102
+ /**
1103
+ * Search bar left icon
1104
+ */
1105
+ "leftIcon"?: string;
1106
+ /**
1107
+ * Event emitted when search bar is focused.
1108
+ */
1109
+ "onFocusedOn"?: (event: SulaSearchBarCustomEvent<void>) => void;
1110
+ /**
1111
+ * Event emitted when search bar is focused out.
1112
+ */
1113
+ "onFocusedOut"?: (event: SulaSearchBarCustomEvent<void>) => void;
1114
+ /**
1115
+ * Event emitted when right icon is clicked
1116
+ */
1117
+ "onRightIconClicked"?: (event: SulaSearchBarCustomEvent<void>) => void;
1118
+ /**
1119
+ * Event emitted when search bar value changes.
1120
+ */
1121
+ "onValueChanged"?: (event: SulaSearchBarCustomEvent<string>) => void;
1122
+ /**
1123
+ * Search bar placeholder
1124
+ */
1125
+ "placeholder"?: string;
1126
+ /**
1127
+ * Search bar right icon
1128
+ */
1129
+ "rightIcon"?: string;
1130
+ /**
1131
+ * Search bar style
1132
+ * @default SulaSearchBarStyle.Default
1133
+ */
1134
+ "searchBarStyle"?: SulaSearchBarStyle;
1135
+ /**
1136
+ * Value for the search bar.
1137
+ */
1138
+ "value"?: string;
1139
+ }
968
1140
  interface SulaSwitch {
969
1141
  /**
970
1142
  * Is switch active
@@ -1197,7 +1369,9 @@ declare namespace LocalJSX {
1197
1369
  "sula-icon": SulaIcon;
1198
1370
  "sula-loader": SulaLoader;
1199
1371
  "sula-menu-select-list": SulaMenuSelectList;
1372
+ "sula-progress-bar": SulaProgressBar;
1200
1373
  "sula-radio-button": SulaRadioButton;
1374
+ "sula-search-bar": SulaSearchBar;
1201
1375
  "sula-switch": SulaSwitch;
1202
1376
  "sula-tag": SulaTag;
1203
1377
  "sula-textarea": SulaTextarea;
@@ -1219,7 +1393,9 @@ declare module "@stencil/core" {
1219
1393
  "sula-icon": LocalJSX.SulaIcon & JSXBase.HTMLAttributes<HTMLSulaIconElement>;
1220
1394
  "sula-loader": LocalJSX.SulaLoader & JSXBase.HTMLAttributes<HTMLSulaLoaderElement>;
1221
1395
  "sula-menu-select-list": LocalJSX.SulaMenuSelectList & JSXBase.HTMLAttributes<HTMLSulaMenuSelectListElement>;
1396
+ "sula-progress-bar": LocalJSX.SulaProgressBar & JSXBase.HTMLAttributes<HTMLSulaProgressBarElement>;
1222
1397
  "sula-radio-button": LocalJSX.SulaRadioButton & JSXBase.HTMLAttributes<HTMLSulaRadioButtonElement>;
1398
+ "sula-search-bar": LocalJSX.SulaSearchBar & JSXBase.HTMLAttributes<HTMLSulaSearchBarElement>;
1223
1399
  "sula-switch": LocalJSX.SulaSwitch & JSXBase.HTMLAttributes<HTMLSulaSwitchElement>;
1224
1400
  "sula-tag": LocalJSX.SulaTag & JSXBase.HTMLAttributes<HTMLSulaTagElement>;
1225
1401
  "sula-textarea": LocalJSX.SulaTextarea & JSXBase.HTMLAttributes<HTMLSulaTextareaElement>;