@sellmate/design-system-react 1.0.60 → 1.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/components.d.ts +25 -2
  2. package/dist/components/components.js +33 -0
  3. package/dist/components/components.server.d.ts +25 -2
  4. package/dist/components/components.server.js +49 -5
  5. package/lib/components/components.server.ts +69 -7
  6. package/lib/components/components.ts +50 -2
  7. package/package.json +2 -2
package/dist/components/components.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file was automatically generated by the Stencil React Output Target.
3
3
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
4
4
  */
5
- import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
5
+ import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
6
6
  import { SdActionModal as SdActionModalElement } from "@sellmate/design-system/dist/components/sd-action-modal.js";
7
7
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
8
8
  import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
@@ -13,7 +13,10 @@ import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components
13
13
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
14
14
  import { SdConfirmModal as SdConfirmModalElement } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
15
15
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
16
+ import { SdDatePickerCalendar as SdDatePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-picker-calendar.js";
17
+ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/design-system/dist/components/sd-date-picker-trigger.js";
16
18
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
19
+ import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
17
20
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
18
21
  import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
19
22
  import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
@@ -111,14 +114,34 @@ export type SdDatePickerEvents = {
111
114
  }>>;
112
115
  };
113
116
  export declare const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePickerEvents>;
117
+ export type SdDatePickerCalendarEvents = {
118
+ onSdSelect: EventName<CustomEvent<string>>;
119
+ onSdViewChange: EventName<CustomEvent<{
120
+ year: number;
121
+ month: number;
122
+ }>>;
123
+ };
124
+ export declare const SdDatePickerCalendar: StencilReactComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents>;
125
+ export type SdDatePickerTriggerEvents = {
126
+ onSdTriggerClick: EventName<CustomEvent<void>>;
127
+ };
128
+ export declare const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents>;
114
129
  export type SdDateRangePickerEvents = {
115
- onSdUpdate: EventName<CustomEvent<[string, string]>>;
130
+ onSdUpdate: EventName<SdDateRangePickerCustomEvent<DateRangeValue>>;
116
131
  onSdViewChange: EventName<CustomEvent<{
117
132
  year: number;
118
133
  month: number;
119
134
  }>>;
120
135
  };
121
136
  export declare const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents>;
137
+ export type SdDateRangePickerCalendarEvents = {
138
+ onSdSelect: EventName<CustomEvent<[string, string]>>;
139
+ onSdViewChange: EventName<CustomEvent<{
140
+ year: number;
141
+ month: number;
142
+ }>>;
143
+ };
144
+ export declare const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents>;
122
145
  export type SdDropdownButtonEvents = {
123
146
  onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
124
147
  onSdDropDownShow: EventName<CustomEvent<{
package/dist/components/components.js CHANGED
@@ -9,7 +9,10 @@ import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@s
9
9
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
10
10
  import { SdConfirmModal as SdConfirmModalElement, defineCustomElement as defineSdConfirmModal } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
11
11
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
12
+ import { SdDatePickerCalendar as SdDatePickerCalendarElement, defineCustomElement as defineSdDatePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-picker-calendar.js";
13
+ import { SdDatePickerTrigger as SdDatePickerTriggerElement, defineCustomElement as defineSdDatePickerTrigger } from "@sellmate/design-system/dist/components/sd-date-picker-trigger.js";
12
14
  import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
15
+ import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement, defineCustomElement as defineSdDateRangePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
13
16
  import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
14
17
  import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
15
18
  import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
@@ -162,6 +165,25 @@ export const SdDatePicker = /*@__PURE__*/ createComponent({
162
165
  },
163
166
  defineCustomElement: defineSdDatePicker
164
167
  });
168
+ export const SdDatePickerCalendar = /*@__PURE__*/ createComponent({
169
+ tagName: 'sd-date-picker-calendar',
170
+ elementClass: SdDatePickerCalendarElement,
171
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
172
+ react: React,
173
+ events: {
174
+ onSdSelect: 'sdSelect',
175
+ onSdViewChange: 'sdViewChange'
176
+ },
177
+ defineCustomElement: defineSdDatePickerCalendar
178
+ });
179
+ export const SdDatePickerTrigger = /*@__PURE__*/ createComponent({
180
+ tagName: 'sd-date-picker-trigger',
181
+ elementClass: SdDatePickerTriggerElement,
182
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
183
+ react: React,
184
+ events: { onSdTriggerClick: 'sdTriggerClick' },
185
+ defineCustomElement: defineSdDatePickerTrigger
186
+ });
165
187
  export const SdDateRangePicker = /*@__PURE__*/ createComponent({
166
188
  tagName: 'sd-date-range-picker',
167
189
  elementClass: SdDateRangePickerElement,
@@ -173,6 +195,17 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
173
195
  },
174
196
  defineCustomElement: defineSdDateRangePicker
175
197
  });
198
+ export const SdDateRangePickerCalendar = /*@__PURE__*/ createComponent({
199
+ tagName: 'sd-date-range-picker-calendar',
200
+ elementClass: SdDateRangePickerCalendarElement,
201
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
202
+ react: React,
203
+ events: {
204
+ onSdSelect: 'sdSelect',
205
+ onSdViewChange: 'sdViewChange'
206
+ },
207
+ defineCustomElement: defineSdDateRangePickerCalendar
208
+ });
176
209
  export const SdDropdownButton = /*@__PURE__*/ createComponent({
177
210
  tagName: 'sd-dropdown-button',
178
211
  elementClass: SdDropdownButtonElement,
package/dist/components/components.server.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file was automatically generated by the Stencil React Output Target.
3
3
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
4
4
  */
5
- import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
5
+ import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
6
6
  import { SdActionModal as SdActionModalElement } from "@sellmate/design-system/dist/components/sd-action-modal.js";
7
7
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
8
8
  import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
@@ -13,7 +13,10 @@ import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components
13
13
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
14
14
  import { SdConfirmModal as SdConfirmModalElement } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
15
15
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
16
+ import { SdDatePickerCalendar as SdDatePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-picker-calendar.js";
17
+ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/design-system/dist/components/sd-date-picker-trigger.js";
16
18
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
19
+ import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
17
20
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
18
21
  import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
19
22
  import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
@@ -113,14 +116,34 @@ export type SdDatePickerEvents = {
113
116
  }>>;
114
117
  };
115
118
  export declare const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePickerEvents>;
119
+ export type SdDatePickerCalendarEvents = {
120
+ onSdSelect: EventName<CustomEvent<string>>;
121
+ onSdViewChange: EventName<CustomEvent<{
122
+ year: number;
123
+ month: number;
124
+ }>>;
125
+ };
126
+ export declare const SdDatePickerCalendar: StencilReactComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents>;
127
+ export type SdDatePickerTriggerEvents = {
128
+ onSdTriggerClick: EventName<CustomEvent<void>>;
129
+ };
130
+ export declare const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents>;
116
131
  export type SdDateRangePickerEvents = {
117
- onSdUpdate: EventName<CustomEvent<[string, string]>>;
132
+ onSdUpdate: EventName<SdDateRangePickerCustomEvent<DateRangeValue>>;
118
133
  onSdViewChange: EventName<CustomEvent<{
119
134
  year: number;
120
135
  month: number;
121
136
  }>>;
122
137
  };
123
138
  export declare const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents>;
139
+ export type SdDateRangePickerCalendarEvents = {
140
+ onSdSelect: EventName<CustomEvent<[string, string]>>;
141
+ onSdViewChange: EventName<CustomEvent<{
142
+ year: number;
143
+ month: number;
144
+ }>>;
145
+ };
146
+ export declare const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents>;
124
147
  export type SdDropdownButtonEvents = {
125
148
  onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
126
149
  onSdDropDownShow: EventName<CustomEvent<{
package/dist/components/components.server.js CHANGED
@@ -153,26 +153,70 @@ export const SdDatePicker = /*@__PURE__*/ createComponent({
153
153
  tagName: 'sd-date-picker',
154
154
  properties: {
155
155
  value: 'value',
156
- label: 'label',
156
+ size: 'size',
157
+ placeholder: 'placeholder',
157
158
  disabled: 'disabled',
158
- placeholder: 'placeholder'
159
+ width: 'width',
160
+ label: 'label',
161
+ addonLabel: 'addon-label',
162
+ hint: 'hint',
163
+ errorMessage: 'error-message',
164
+ fieldName: 'field-name',
165
+ error: 'error',
166
+ labelTooltip: 'label-tooltip',
167
+ rules: 'rules'
159
168
  },
160
169
  hydrateModule: import('@sellmate/design-system/hydrate'),
161
170
  clientModule: clientComponents.SdDatePicker,
162
171
  serializeShadowRoot,
163
172
  });
173
+ export const SdDatePickerCalendar = /*@__PURE__*/ createComponent({
174
+ tagName: 'sd-date-picker-calendar',
175
+ properties: { value: 'value' },
176
+ hydrateModule: import('@sellmate/design-system/hydrate'),
177
+ clientModule: clientComponents.SdDatePickerCalendar,
178
+ serializeShadowRoot,
179
+ });
180
+ export const SdDatePickerTrigger = /*@__PURE__*/ createComponent({
181
+ tagName: 'sd-date-picker-trigger',
182
+ properties: {
183
+ displayText: 'display-text',
184
+ placeholder: 'placeholder',
185
+ disabled: 'disabled',
186
+ size: 'size'
187
+ },
188
+ hydrateModule: import('@sellmate/design-system/hydrate'),
189
+ clientModule: clientComponents.SdDatePickerTrigger,
190
+ serializeShadowRoot,
191
+ });
164
192
  export const SdDateRangePicker = /*@__PURE__*/ createComponent({
165
193
  tagName: 'sd-date-range-picker',
166
194
  properties: {
167
- label: 'label',
195
+ size: 'size',
196
+ placeholder: 'placeholder',
168
197
  maxRange: 'max-range',
169
198
  disabled: 'disabled',
170
- placeholder: 'placeholder'
199
+ width: 'width',
200
+ label: 'label',
201
+ addonLabel: 'addon-label',
202
+ hint: 'hint',
203
+ errorMessage: 'error-message',
204
+ fieldName: 'field-name',
205
+ error: 'error',
206
+ labelTooltip: 'label-tooltip',
207
+ rules: 'rules'
171
208
  },
172
209
  hydrateModule: import('@sellmate/design-system/hydrate'),
173
210
  clientModule: clientComponents.SdDateRangePicker,
174
211
  serializeShadowRoot,
175
212
  });
213
+ export const SdDateRangePickerCalendar = /*@__PURE__*/ createComponent({
214
+ tagName: 'sd-date-range-picker-calendar',
215
+ properties: { maxRange: 'max-range' },
216
+ hydrateModule: import('@sellmate/design-system/hydrate'),
217
+ clientModule: clientComponents.SdDateRangePickerCalendar,
218
+ serializeShadowRoot,
219
+ });
176
220
  export const SdDropdownButton = /*@__PURE__*/ createComponent({
177
221
  tagName: 'sd-dropdown-button',
178
222
  properties: {
@@ -436,8 +480,8 @@ export const SdRadio = /*@__PURE__*/ createComponent({
436
480
  tagName: 'sd-radio',
437
481
  properties: {
438
482
  value: 'value',
439
- disabled: 'disabled',
440
483
  val: 'val',
484
+ disabled: 'disabled',
441
485
  label: 'label'
442
486
  },
443
487
  hydrateModule: import('@sellmate/design-system/hydrate'),
package/lib/components/components.server.ts CHANGED
@@ -8,7 +8,7 @@
8
8
  // @ts-ignore - ignore potential type issues as the project is importing itself
9
9
  import * as clientComponents from '@sellmate/design-system-react';
10
10
 
11
- import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
11
+ import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type Event, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
12
12
  import { SdActionModal as SdActionModalElement } from "@sellmate/design-system/dist/components/sd-action-modal.js";
13
13
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
14
14
  import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
@@ -19,7 +19,10 @@ import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components
19
19
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
20
20
  import { SdConfirmModal as SdConfirmModalElement } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
21
21
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
22
+ import { SdDatePickerCalendar as SdDatePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-picker-calendar.js";
23
+ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/design-system/dist/components/sd-date-picker-trigger.js";
22
24
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
25
+ import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
23
26
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
24
27
  import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
25
28
  import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
@@ -265,33 +268,92 @@ export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePick
265
268
  tagName: 'sd-date-picker',
266
269
  properties: {
267
270
  value: 'value',
268
- label: 'label',
271
+ size: 'size',
272
+ placeholder: 'placeholder',
269
273
  disabled: 'disabled',
270
- placeholder: 'placeholder'
274
+ width: 'width',
275
+ label: 'label',
276
+ addonLabel: 'addon-label',
277
+ hint: 'hint',
278
+ errorMessage: 'error-message',
279
+ fieldName: 'field-name',
280
+ error: 'error',
281
+ labelTooltip: 'label-tooltip',
282
+ rules: 'rules'
271
283
  },
272
284
  hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
273
285
  clientModule: clientComponents.SdDatePicker as ReactWebComponent<SdDatePickerElement, SdDatePickerEvents>,
274
286
  serializeShadowRoot,
275
287
  });
276
288
 
289
+ export type SdDatePickerCalendarEvents = {
290
+ onSdSelect: EventName<CustomEvent<string>>,
291
+ onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
292
+ };
293
+
294
+ export const SdDatePickerCalendar: StencilReactComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents> = /*@__PURE__*/ createComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents>({
295
+ tagName: 'sd-date-picker-calendar',
296
+ properties: { value: 'value' },
297
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
298
+ clientModule: clientComponents.SdDatePickerCalendar as ReactWebComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents>,
299
+ serializeShadowRoot,
300
+ });
301
+
302
+ export type SdDatePickerTriggerEvents = { onSdTriggerClick: EventName<CustomEvent<void>> };
303
+
304
+ export const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents> = /*@__PURE__*/ createComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents>({
305
+ tagName: 'sd-date-picker-trigger',
306
+ properties: {
307
+ displayText: 'display-text',
308
+ placeholder: 'placeholder',
309
+ disabled: 'disabled',
310
+ size: 'size'
311
+ },
312
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
313
+ clientModule: clientComponents.SdDatePickerTrigger as ReactWebComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents>,
314
+ serializeShadowRoot,
315
+ });
316
+
277
317
  export type SdDateRangePickerEvents = {
278
- onSdUpdate: EventName<CustomEvent<[string, string]>>,
318
+ onSdUpdate: EventName<SdDateRangePickerCustomEvent<DateRangeValue>>,
279
319
  onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
280
320
  };
281
321
 
282
322
  export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents> = /*@__PURE__*/ createComponent<SdDateRangePickerElement, SdDateRangePickerEvents>({
283
323
  tagName: 'sd-date-range-picker',
284
324
  properties: {
285
- label: 'label',
325
+ size: 'size',
326
+ placeholder: 'placeholder',
286
327
  maxRange: 'max-range',
287
328
  disabled: 'disabled',
288
- placeholder: 'placeholder'
329
+ width: 'width',
330
+ label: 'label',
331
+ addonLabel: 'addon-label',
332
+ hint: 'hint',
333
+ errorMessage: 'error-message',
334
+ fieldName: 'field-name',
335
+ error: 'error',
336
+ labelTooltip: 'label-tooltip',
337
+ rules: 'rules'
289
338
  },
290
339
  hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
291
340
  clientModule: clientComponents.SdDateRangePicker as ReactWebComponent<SdDateRangePickerElement, SdDateRangePickerEvents>,
292
341
  serializeShadowRoot,
293
342
  });
294
343
 
344
+ export type SdDateRangePickerCalendarEvents = {
345
+ onSdSelect: EventName<CustomEvent<[string, string]>>,
346
+ onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
347
+ };
348
+
349
+ export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents> = /*@__PURE__*/ createComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents>({
350
+ tagName: 'sd-date-range-picker-calendar',
351
+ properties: { maxRange: 'max-range' },
352
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
353
+ clientModule: clientComponents.SdDateRangePickerCalendar as ReactWebComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents>,
354
+ serializeShadowRoot,
355
+ });
356
+
295
357
  export type SdDropdownButtonEvents = {
296
358
  onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
297
359
  onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
@@ -622,8 +684,8 @@ export const SdRadio: StencilReactComponent<SdRadioElement, SdRadioEvents> = /*@
622
684
  tagName: 'sd-radio',
623
685
  properties: {
624
686
  value: 'value',
625
- disabled: 'disabled',
626
687
  val: 'val',
688
+ disabled: 'disabled',
627
689
  label: 'label'
628
690
  },
629
691
  hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
package/lib/components/components.ts CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  /* eslint-disable */
9
9
 
10
- import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
10
+ import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type Event, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
11
11
  import { SdActionModal as SdActionModalElement, defineCustomElement as defineSdActionModal } from "@sellmate/design-system/dist/components/sd-action-modal.js";
12
12
  import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
13
13
  import { SdBarcodeInput as SdBarcodeInputElement, defineCustomElement as defineSdBarcodeInput } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
@@ -18,7 +18,10 @@ import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@s
18
18
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
19
19
  import { SdConfirmModal as SdConfirmModalElement, defineCustomElement as defineSdConfirmModal } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
20
20
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
21
+ import { SdDatePickerCalendar as SdDatePickerCalendarElement, defineCustomElement as defineSdDatePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-picker-calendar.js";
22
+ import { SdDatePickerTrigger as SdDatePickerTriggerElement, defineCustomElement as defineSdDatePickerTrigger } from "@sellmate/design-system/dist/components/sd-date-picker-trigger.js";
21
23
  import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
24
+ import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement, defineCustomElement as defineSdDateRangePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
22
25
  import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
23
26
  import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
24
27
  import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
@@ -226,8 +229,36 @@ export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePick
226
229
  defineCustomElement: defineSdDatePicker
227
230
  });
228
231
 
232
+ export type SdDatePickerCalendarEvents = {
233
+ onSdSelect: EventName<CustomEvent<string>>,
234
+ onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
235
+ };
236
+
237
+ export const SdDatePickerCalendar: StencilReactComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents> = /*@__PURE__*/ createComponent<SdDatePickerCalendarElement, SdDatePickerCalendarEvents>({
238
+ tagName: 'sd-date-picker-calendar',
239
+ elementClass: SdDatePickerCalendarElement,
240
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
241
+ react: React,
242
+ events: {
243
+ onSdSelect: 'sdSelect',
244
+ onSdViewChange: 'sdViewChange'
245
+ } as SdDatePickerCalendarEvents,
246
+ defineCustomElement: defineSdDatePickerCalendar
247
+ });
248
+
249
+ export type SdDatePickerTriggerEvents = { onSdTriggerClick: EventName<CustomEvent<void>> };
250
+
251
+ export const SdDatePickerTrigger: StencilReactComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents> = /*@__PURE__*/ createComponent<SdDatePickerTriggerElement, SdDatePickerTriggerEvents>({
252
+ tagName: 'sd-date-picker-trigger',
253
+ elementClass: SdDatePickerTriggerElement,
254
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
255
+ react: React,
256
+ events: { onSdTriggerClick: 'sdTriggerClick' } as SdDatePickerTriggerEvents,
257
+ defineCustomElement: defineSdDatePickerTrigger
258
+ });
259
+
229
260
  export type SdDateRangePickerEvents = {
230
- onSdUpdate: EventName<CustomEvent<[string, string]>>,
261
+ onSdUpdate: EventName<SdDateRangePickerCustomEvent<DateRangeValue>>,
231
262
  onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
232
263
  };
233
264
 
@@ -243,6 +274,23 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
243
274
  defineCustomElement: defineSdDateRangePicker
244
275
  });
245
276
 
277
+ export type SdDateRangePickerCalendarEvents = {
278
+ onSdSelect: EventName<CustomEvent<[string, string]>>,
279
+ onSdViewChange: EventName<CustomEvent<{ year: number; month: number }>>
280
+ };
281
+
282
+ export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents> = /*@__PURE__*/ createComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents>({
283
+ tagName: 'sd-date-range-picker-calendar',
284
+ elementClass: SdDateRangePickerCalendarElement,
285
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
286
+ react: React,
287
+ events: {
288
+ onSdSelect: 'sdSelect',
289
+ onSdViewChange: 'sdViewChange'
290
+ } as SdDateRangePickerCalendarEvents,
291
+ defineCustomElement: defineSdDateRangePickerCalendar
292
+ });
293
+
246
294
  export type SdDropdownButtonEvents = {
247
295
  onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
248
296
  onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system-react",
3
- "version": "1.0.60",
3
+ "version": "1.0.62",
4
4
  "description": "Design System - React Component Wrappers",
5
5
  "keywords": [
6
6
  "react",
@@ -54,7 +54,7 @@
54
54
  "dev": "tsc --watch"
55
55
  },
56
56
  "dependencies": {
57
- "@sellmate/design-system": "^1.0.60",
57
+ "@sellmate/design-system": "^1.0.62",
58
58
  "@stencil/react-output-target": "^1.2.0"
59
59
  },
60
60
  "peerDependencies": {