@sellmate/design-system-react 1.0.36 → 1.0.38

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 (9) hide show
  1. package/dist/components/components.d.ts +15 -6
  2. package/dist/components/components.js +26 -5
  3. package/dist/components/components.server.d.ts +15 -6
  4. package/dist/components/components.server.js +38 -11
  5. package/dist/index.d.ts +1 -1
  6. package/lib/components/components.server.ts +54 -16
  7. package/lib/components/components.ts +40 -10
  8. package/lib/index.ts +0 -2
  9. package/package.json +2 -2
package/dist/components/components.d.ts CHANGED
@@ -2,13 +2,14 @@
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 SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
5
+ import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
6
6
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
7
7
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
8
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
9
9
  import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
10
10
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
11
11
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
12
+ import { SdConfirmModal as SdConfirmModalElement } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
12
13
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
13
14
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
14
15
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
@@ -21,7 +22,8 @@ import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/componen
21
22
  import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
22
23
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
23
24
  import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
24
- import { SdModalCard as SdModalCardElement } from "@sellmate/design-system/dist/components/sd-modal-card.js";
25
+ import { SdModalContainer as SdModalContainerElement } from "@sellmate/design-system/dist/components/sd-modal-container.js";
26
+ import { SdNoticeModal as SdNoticeModalElement } from "@sellmate/design-system/dist/components/sd-notice-modal.js";
25
27
  import { SdNumberInput as SdNumberInputElement } from "@sellmate/design-system/dist/components/sd-number-input.js";
26
28
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
27
29
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
@@ -76,6 +78,11 @@ export type SdCheckboxEvents = {
76
78
  onSdUpdate: EventName<SdCheckboxCustomEvent<CheckedType>>;
77
79
  };
78
80
  export declare const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEvents>;
81
+ export type SdConfirmModalEvents = {
82
+ onSdClose: EventName<CustomEvent<void>>;
83
+ onSdConfirm: EventName<CustomEvent<void>>;
84
+ };
85
+ export declare const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents>;
79
86
  export type SdDateBoxEvents = {
80
87
  onSdClick: EventName<CustomEvent<number | string | null>>;
81
88
  onSdMouseOver: EventName<CustomEvent<number | string | null>>;
@@ -131,11 +138,13 @@ export type SdInputEvents = {
131
138
  export declare const SdInput: StencilReactComponent<SdInputElement, SdInputEvents>;
132
139
  export type SdLoadingSpinnerEvents = NonNullable<unknown>;
133
140
  export declare const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>;
134
- export type SdModalCardEvents = {
135
- onSdClose: EventName<SdModalCardCustomEvent<MouseEvent>>;
136
- onSdConfirm: EventName<SdModalCardCustomEvent<MouseEvent>>;
141
+ export type SdModalContainerEvents = NonNullable<unknown>;
142
+ export declare const SdModalContainer: StencilReactComponent<SdModalContainerElement, SdModalContainerEvents>;
143
+ export type SdNoticeModalEvents = {
144
+ onSdClose: EventName<CustomEvent<void>>;
145
+ onSdConfirm: EventName<CustomEvent<void>>;
137
146
  };
138
- export declare const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardEvents>;
147
+ export declare const SdNoticeModal: StencilReactComponent<SdNoticeModalElement, SdNoticeModalEvents>;
139
148
  export type SdNumberInputEvents = {
140
149
  onSdUpdate: EventName<CustomEvent<number | null>>;
141
150
  onSdFocus: EventName<SdNumberInputCustomEvent<Event>>;
package/dist/components/components.js CHANGED
@@ -5,6 +5,7 @@ import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } fr
5
5
  import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
6
6
  import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
7
7
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
8
+ import { SdConfirmModal as SdConfirmModalElement, defineCustomElement as defineSdConfirmModal } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
8
9
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
9
10
  import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
10
11
  import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
@@ -17,7 +18,8 @@ import { SdGuide as SdGuideElement, defineCustomElement as defineSdGuide } from
17
18
  import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@sellmate/design-system/dist/components/sd-icon.js";
18
19
  import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
19
20
  import { SdLoadingSpinner as SdLoadingSpinnerElement, defineCustomElement as defineSdLoadingSpinner } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
20
- import { SdModalCard as SdModalCardElement, defineCustomElement as defineSdModalCard } from "@sellmate/design-system/dist/components/sd-modal-card.js";
21
+ import { SdModalContainer as SdModalContainerElement, defineCustomElement as defineSdModalContainer } from "@sellmate/design-system/dist/components/sd-modal-container.js";
22
+ import { SdNoticeModal as SdNoticeModalElement, defineCustomElement as defineSdNoticeModal } from "@sellmate/design-system/dist/components/sd-notice-modal.js";
21
23
  import { SdNumberInput as SdNumberInputElement, defineCustomElement as defineSdNumberInput } from "@sellmate/design-system/dist/components/sd-number-input.js";
22
24
  import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
23
25
  import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
@@ -100,6 +102,17 @@ export const SdCheckbox = /*@__PURE__*/ createComponent({
100
102
  events: { onSdUpdate: 'sdUpdate' },
101
103
  defineCustomElement: defineSdCheckbox
102
104
  });
105
+ export const SdConfirmModal = /*@__PURE__*/ createComponent({
106
+ tagName: 'sd-confirm-modal',
107
+ elementClass: SdConfirmModalElement,
108
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
109
+ react: React,
110
+ events: {
111
+ onSdClose: 'sdClose',
112
+ onSdConfirm: 'sdConfirm'
113
+ },
114
+ defineCustomElement: defineSdConfirmModal
115
+ });
103
116
  export const SdDateBox = /*@__PURE__*/ createComponent({
104
117
  tagName: 'sd-date-box',
105
118
  elementClass: SdDateBoxElement,
@@ -215,16 +228,24 @@ export const SdLoadingSpinner = /*@__PURE__*/ createComponent({
215
228
  events: {},
216
229
  defineCustomElement: defineSdLoadingSpinner
217
230
  });
218
- export const SdModalCard = /*@__PURE__*/ createComponent({
219
- tagName: 'sd-modal-card',
220
- elementClass: SdModalCardElement,
231
+ export const SdModalContainer = /*@__PURE__*/ createComponent({
232
+ tagName: 'sd-modal-container',
233
+ elementClass: SdModalContainerElement,
234
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
235
+ react: React,
236
+ events: {},
237
+ defineCustomElement: defineSdModalContainer
238
+ });
239
+ export const SdNoticeModal = /*@__PURE__*/ createComponent({
240
+ tagName: 'sd-notice-modal',
241
+ elementClass: SdNoticeModalElement,
221
242
  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
222
243
  react: React,
223
244
  events: {
224
245
  onSdClose: 'sdClose',
225
246
  onSdConfirm: 'sdConfirm'
226
247
  },
227
- defineCustomElement: defineSdModalCard
248
+ defineCustomElement: defineSdNoticeModal
228
249
  });
229
250
  export const SdNumberInput = /*@__PURE__*/ createComponent({
230
251
  tagName: 'sd-number-input',
package/dist/components/components.server.d.ts CHANGED
@@ -2,13 +2,14 @@
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 SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
5
+ import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
6
6
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
7
7
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
8
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
9
9
  import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
10
10
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
11
11
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
12
+ import { SdConfirmModal as SdConfirmModalElement } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
12
13
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
13
14
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
14
15
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
@@ -21,7 +22,8 @@ import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/componen
21
22
  import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
22
23
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
23
24
  import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
24
- import { SdModalCard as SdModalCardElement } from "@sellmate/design-system/dist/components/sd-modal-card.js";
25
+ import { SdModalContainer as SdModalContainerElement } from "@sellmate/design-system/dist/components/sd-modal-container.js";
26
+ import { SdNoticeModal as SdNoticeModalElement } from "@sellmate/design-system/dist/components/sd-notice-modal.js";
25
27
  import { SdNumberInput as SdNumberInputElement } from "@sellmate/design-system/dist/components/sd-number-input.js";
26
28
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
27
29
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
@@ -78,6 +80,11 @@ export type SdCheckboxEvents = {
78
80
  onSdUpdate: EventName<SdCheckboxCustomEvent<CheckedType>>;
79
81
  };
80
82
  export declare const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEvents>;
83
+ export type SdConfirmModalEvents = {
84
+ onSdClose: EventName<CustomEvent<void>>;
85
+ onSdConfirm: EventName<CustomEvent<void>>;
86
+ };
87
+ export declare const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents>;
81
88
  export type SdDateBoxEvents = {
82
89
  onSdClick: EventName<CustomEvent<number | string | null>>;
83
90
  onSdMouseOver: EventName<CustomEvent<number | string | null>>;
@@ -133,11 +140,13 @@ export type SdInputEvents = {
133
140
  export declare const SdInput: StencilReactComponent<SdInputElement, SdInputEvents>;
134
141
  export type SdLoadingSpinnerEvents = NonNullable<unknown>;
135
142
  export declare const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>;
136
- export type SdModalCardEvents = {
137
- onSdClose: EventName<SdModalCardCustomEvent<MouseEvent>>;
138
- onSdConfirm: EventName<SdModalCardCustomEvent<MouseEvent>>;
143
+ export type SdModalContainerEvents = NonNullable<unknown>;
144
+ export declare const SdModalContainer: StencilReactComponent<SdModalContainerElement, SdModalContainerEvents>;
145
+ export type SdNoticeModalEvents = {
146
+ onSdClose: EventName<CustomEvent<void>>;
147
+ onSdConfirm: EventName<CustomEvent<void>>;
139
148
  };
140
- export declare const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardEvents>;
149
+ export declare const SdNoticeModal: StencilReactComponent<SdNoticeModalElement, SdNoticeModalEvents>;
141
150
  export type SdNumberInputEvents = {
142
151
  onSdUpdate: EventName<CustomEvent<number | null>>;
143
152
  onSdFocus: EventName<SdNumberInputCustomEvent<Event>>;
package/dist/components/components.server.js CHANGED
@@ -80,6 +80,25 @@ export const SdCheckbox = /*@__PURE__*/ createComponent({
80
80
  clientModule: clientComponents.SdCheckbox,
81
81
  serializeShadowRoot,
82
82
  });
83
+ export const SdConfirmModal = /*@__PURE__*/ createComponent({
84
+ tagName: 'sd-confirm-modal',
85
+ properties: {
86
+ type: 'type',
87
+ modalTitle: 'modal-title',
88
+ titleClass: 'title-class',
89
+ mainButtonName: 'main-button-name',
90
+ mainButtonLabel: 'main-button-label',
91
+ subButtonLabel: 'sub-button-label',
92
+ tagPreset: 'tag-preset',
93
+ tagLabel: 'tag-label',
94
+ slotLabel: 'slot-label',
95
+ topMessage: 'topMessage',
96
+ bottomMessage: 'bottomMessage'
97
+ },
98
+ hydrateModule: import('@sellmate/design-system/hydrate'),
99
+ clientModule: clientComponents.SdConfirmModal,
100
+ serializeShadowRoot,
101
+ });
83
102
  export const SdDateBox = /*@__PURE__*/ createComponent({
84
103
  tagName: 'sd-date-box',
85
104
  properties: {
@@ -243,20 +262,28 @@ export const SdLoadingSpinner = /*@__PURE__*/ createComponent({
243
262
  clientModule: clientComponents.SdLoadingSpinner,
244
263
  serializeShadowRoot,
245
264
  });
246
- export const SdModalCard = /*@__PURE__*/ createComponent({
247
- tagName: 'sd-modal-card',
265
+ export const SdModalContainer = /*@__PURE__*/ createComponent({
266
+ tagName: 'sd-modal-container',
267
+ properties: {},
268
+ hydrateModule: import('@sellmate/design-system/hydrate'),
269
+ clientModule: clientComponents.SdModalContainer,
270
+ serializeShadowRoot,
271
+ });
272
+ export const SdNoticeModal = /*@__PURE__*/ createComponent({
273
+ tagName: 'sd-notice-modal',
248
274
  properties: {
249
- type: 'type',
250
- system: 'system',
251
- useCloseButton: 'use-close-button',
252
275
  modalTitle: 'modal-title',
253
- buttonFlexDirection: 'button-flex-direction',
254
- sdClass: 'sd-class',
255
- buttonProps: 'buttonProps',
256
- message: 'message'
276
+ titleClass: 'title-class',
277
+ mainButtonLabel: 'main-button-label',
278
+ subButtonLabel: 'sub-button-label',
279
+ tagPreset: 'tag-preset',
280
+ tagLabel: 'tag-label',
281
+ slotLabel: 'slot-label',
282
+ topMessage: 'topMessage',
283
+ bottomMessage: 'bottomMessage'
257
284
  },
258
285
  hydrateModule: import('@sellmate/design-system/hydrate'),
259
- clientModule: clientComponents.SdModalCard,
286
+ clientModule: clientComponents.SdNoticeModal,
260
287
  serializeShadowRoot,
261
288
  });
262
289
  export const SdNumberInput = /*@__PURE__*/ createComponent({
@@ -537,7 +564,6 @@ export const SdSelectV2 = /*@__PURE__*/ createComponent({
537
564
  name: 'name',
538
565
  value: 'value',
539
566
  placeholder: 'placeholder',
540
- width: 'width',
541
567
  maxDropdownWidth: 'max-dropdown-width',
542
568
  dropdownHeight: 'dropdown-height',
543
569
  disabled: 'disabled',
@@ -547,6 +573,7 @@ export const SdSelectV2 = /*@__PURE__*/ createComponent({
547
573
  fieldName: 'field-name',
548
574
  labelTooltip: 'label-tooltip',
549
575
  emitValue: 'emit-value',
576
+ width: 'width',
550
577
  options: 'options',
551
578
  rules: 'rules'
552
579
  },
package/dist/index.d.ts CHANGED
@@ -2,4 +2,4 @@ export * from './components/components.js';
2
2
  export { defineCustomElements } from '@sellmate/design-system/loader';
3
3
  export { SdTable } from './SdTable';
4
4
  export type { SdTableProps } from './SdTable';
5
- export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdModalCardButtonProps, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
5
+ export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
package/lib/components/components.server.ts CHANGED
@@ -8,13 +8,14 @@
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 SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
11
+ import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
12
12
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
13
13
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
14
14
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
15
15
  import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
16
16
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
17
17
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
18
+ import { SdConfirmModal as SdConfirmModalElement } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
18
19
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
19
20
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
20
21
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
@@ -27,7 +28,8 @@ import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/componen
27
28
  import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
28
29
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
29
30
  import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
30
- import { SdModalCard as SdModalCardElement } from "@sellmate/design-system/dist/components/sd-modal-card.js";
31
+ import { SdModalContainer as SdModalContainerElement } from "@sellmate/design-system/dist/components/sd-modal-container.js";
32
+ import { SdNoticeModal as SdNoticeModalElement } from "@sellmate/design-system/dist/components/sd-notice-modal.js";
31
33
  import { SdNumberInput as SdNumberInputElement } from "@sellmate/design-system/dist/components/sd-number-input.js";
32
34
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
33
35
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
@@ -156,6 +158,31 @@ export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEven
156
158
  serializeShadowRoot,
157
159
  });
158
160
 
161
+ export type SdConfirmModalEvents = {
162
+ onSdClose: EventName<CustomEvent<void>>,
163
+ onSdConfirm: EventName<CustomEvent<void>>
164
+ };
165
+
166
+ export const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents> = /*@__PURE__*/ createComponent<SdConfirmModalElement, SdConfirmModalEvents>({
167
+ tagName: 'sd-confirm-modal',
168
+ properties: {
169
+ type: 'type',
170
+ modalTitle: 'modal-title',
171
+ titleClass: 'title-class',
172
+ mainButtonName: 'main-button-name',
173
+ mainButtonLabel: 'main-button-label',
174
+ subButtonLabel: 'sub-button-label',
175
+ tagPreset: 'tag-preset',
176
+ tagLabel: 'tag-label',
177
+ slotLabel: 'slot-label',
178
+ topMessage: 'topMessage',
179
+ bottomMessage: 'bottomMessage'
180
+ },
181
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
182
+ clientModule: clientComponents.SdConfirmModal as ReactWebComponent<SdConfirmModalElement, SdConfirmModalEvents>,
183
+ serializeShadowRoot,
184
+ });
185
+
159
186
  export type SdDateBoxEvents = {
160
187
  onSdClick: EventName<CustomEvent<number | string | null>>,
161
188
  onSdMouseOver: EventName<CustomEvent<number | string | null>>
@@ -374,25 +401,36 @@ export const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, Sd
374
401
  serializeShadowRoot,
375
402
  });
376
403
 
377
- export type SdModalCardEvents = {
378
- onSdClose: EventName<SdModalCardCustomEvent<MouseEvent>>,
379
- onSdConfirm: EventName<SdModalCardCustomEvent<MouseEvent>>
404
+ export type SdModalContainerEvents = NonNullable<unknown>;
405
+
406
+ export const SdModalContainer: StencilReactComponent<SdModalContainerElement, SdModalContainerEvents> = /*@__PURE__*/ createComponent<SdModalContainerElement, SdModalContainerEvents>({
407
+ tagName: 'sd-modal-container',
408
+ properties: {},
409
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
410
+ clientModule: clientComponents.SdModalContainer as ReactWebComponent<SdModalContainerElement, SdModalContainerEvents>,
411
+ serializeShadowRoot,
412
+ });
413
+
414
+ export type SdNoticeModalEvents = {
415
+ onSdClose: EventName<CustomEvent<void>>,
416
+ onSdConfirm: EventName<CustomEvent<void>>
380
417
  };
381
418
 
382
- export const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardEvents> = /*@__PURE__*/ createComponent<SdModalCardElement, SdModalCardEvents>({
383
- tagName: 'sd-modal-card',
419
+ export const SdNoticeModal: StencilReactComponent<SdNoticeModalElement, SdNoticeModalEvents> = /*@__PURE__*/ createComponent<SdNoticeModalElement, SdNoticeModalEvents>({
420
+ tagName: 'sd-notice-modal',
384
421
  properties: {
385
- type: 'type',
386
- system: 'system',
387
- useCloseButton: 'use-close-button',
388
422
  modalTitle: 'modal-title',
389
- buttonFlexDirection: 'button-flex-direction',
390
- sdClass: 'sd-class',
391
- buttonProps: 'buttonProps',
392
- message: 'message'
423
+ titleClass: 'title-class',
424
+ mainButtonLabel: 'main-button-label',
425
+ subButtonLabel: 'sub-button-label',
426
+ tagPreset: 'tag-preset',
427
+ tagLabel: 'tag-label',
428
+ slotLabel: 'slot-label',
429
+ topMessage: 'topMessage',
430
+ bottomMessage: 'bottomMessage'
393
431
  },
394
432
  hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
395
- clientModule: clientComponents.SdModalCard as ReactWebComponent<SdModalCardElement, SdModalCardEvents>,
433
+ clientModule: clientComponents.SdNoticeModal as ReactWebComponent<SdNoticeModalElement, SdNoticeModalEvents>,
396
434
  serializeShadowRoot,
397
435
  });
398
436
 
@@ -767,7 +805,6 @@ export const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Even
767
805
  name: 'name',
768
806
  value: 'value',
769
807
  placeholder: 'placeholder',
770
- width: 'width',
771
808
  maxDropdownWidth: 'max-dropdown-width',
772
809
  dropdownHeight: 'dropdown-height',
773
810
  disabled: 'disabled',
@@ -777,6 +814,7 @@ export const SdSelectV2: StencilReactComponent<SdSelectV2Element, SdSelectV2Even
777
814
  fieldName: 'field-name',
778
815
  labelTooltip: 'label-tooltip',
779
816
  emitValue: 'emit-value',
817
+ width: 'width',
780
818
  options: 'options',
781
819
  rules: 'rules'
782
820
  },
package/lib/components/components.ts CHANGED
@@ -7,13 +7,14 @@
7
7
 
8
8
  /* eslint-disable */
9
9
 
10
- import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
10
+ import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 SelectV2UpdateDetail, type SelectV2Value } from "@sellmate/design-system";
11
11
  import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
12
12
  import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
13
13
  import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
14
14
  import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
15
15
  import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
16
16
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
17
+ import { SdConfirmModal as SdConfirmModalElement, defineCustomElement as defineSdConfirmModal } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
17
18
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
18
19
  import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
19
20
  import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
@@ -26,7 +27,8 @@ import { SdGuide as SdGuideElement, defineCustomElement as defineSdGuide } from
26
27
  import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@sellmate/design-system/dist/components/sd-icon.js";
27
28
  import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
28
29
  import { SdLoadingSpinner as SdLoadingSpinnerElement, defineCustomElement as defineSdLoadingSpinner } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
29
- import { SdModalCard as SdModalCardElement, defineCustomElement as defineSdModalCard } from "@sellmate/design-system/dist/components/sd-modal-card.js";
30
+ import { SdModalContainer as SdModalContainerElement, defineCustomElement as defineSdModalContainer } from "@sellmate/design-system/dist/components/sd-modal-container.js";
31
+ import { SdNoticeModal as SdNoticeModalElement, defineCustomElement as defineSdNoticeModal } from "@sellmate/design-system/dist/components/sd-notice-modal.js";
30
32
  import { SdNumberInput as SdNumberInputElement, defineCustomElement as defineSdNumberInput } from "@sellmate/design-system/dist/components/sd-number-input.js";
31
33
  import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
32
34
  import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
@@ -132,6 +134,23 @@ export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEven
132
134
  defineCustomElement: defineSdCheckbox
133
135
  });
134
136
 
137
+ export type SdConfirmModalEvents = {
138
+ onSdClose: EventName<CustomEvent<void>>,
139
+ onSdConfirm: EventName<CustomEvent<void>>
140
+ };
141
+
142
+ export const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents> = /*@__PURE__*/ createComponent<SdConfirmModalElement, SdConfirmModalEvents>({
143
+ tagName: 'sd-confirm-modal',
144
+ elementClass: SdConfirmModalElement,
145
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
146
+ react: React,
147
+ events: {
148
+ onSdClose: 'sdClose',
149
+ onSdConfirm: 'sdConfirm'
150
+ } as SdConfirmModalEvents,
151
+ defineCustomElement: defineSdConfirmModal
152
+ });
153
+
135
154
  export type SdDateBoxEvents = {
136
155
  onSdClick: EventName<CustomEvent<number | string | null>>,
137
156
  onSdMouseOver: EventName<CustomEvent<number | string | null>>
@@ -302,21 +321,32 @@ export const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, Sd
302
321
  defineCustomElement: defineSdLoadingSpinner
303
322
  });
304
323
 
305
- export type SdModalCardEvents = {
306
- onSdClose: EventName<SdModalCardCustomEvent<MouseEvent>>,
307
- onSdConfirm: EventName<SdModalCardCustomEvent<MouseEvent>>
324
+ export type SdModalContainerEvents = NonNullable<unknown>;
325
+
326
+ export const SdModalContainer: StencilReactComponent<SdModalContainerElement, SdModalContainerEvents> = /*@__PURE__*/ createComponent<SdModalContainerElement, SdModalContainerEvents>({
327
+ tagName: 'sd-modal-container',
328
+ elementClass: SdModalContainerElement,
329
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
330
+ react: React,
331
+ events: {} as SdModalContainerEvents,
332
+ defineCustomElement: defineSdModalContainer
333
+ });
334
+
335
+ export type SdNoticeModalEvents = {
336
+ onSdClose: EventName<CustomEvent<void>>,
337
+ onSdConfirm: EventName<CustomEvent<void>>
308
338
  };
309
339
 
310
- export const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardEvents> = /*@__PURE__*/ createComponent<SdModalCardElement, SdModalCardEvents>({
311
- tagName: 'sd-modal-card',
312
- elementClass: SdModalCardElement,
340
+ export const SdNoticeModal: StencilReactComponent<SdNoticeModalElement, SdNoticeModalEvents> = /*@__PURE__*/ createComponent<SdNoticeModalElement, SdNoticeModalEvents>({
341
+ tagName: 'sd-notice-modal',
342
+ elementClass: SdNoticeModalElement,
313
343
  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
314
344
  react: React,
315
345
  events: {
316
346
  onSdClose: 'sdClose',
317
347
  onSdConfirm: 'sdConfirm'
318
- } as SdModalCardEvents,
319
- defineCustomElement: defineSdModalCard
348
+ } as SdNoticeModalEvents,
349
+ defineCustomElement: defineSdNoticeModal
320
350
  });
321
351
 
322
352
  export type SdNumberInputEvents = {
package/lib/index.ts CHANGED
@@ -31,8 +31,6 @@ export type {
31
31
  // Form types
32
32
  Rule,
33
33
  ValidatableField,
34
- // Modal types
35
- SdModalCardButtonProps,
36
34
  // Tooltip types
37
35
  SdTooltipProps,
38
36
  // Tag types
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system-react",
3
- "version": "1.0.36",
3
+ "version": "1.0.38",
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.36",
57
+ "@sellmate/design-system": "^1.0.38",
58
58
  "@stencil/react-output-target": "^1.2.0"
59
59
  },
60
60
  "peerDependencies": {