@sellmate/design-system 1.0.14 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/sd-modal-card.cjs.entry.js +2 -8
- package/dist/collection/components/sd-modal-card/sd-modal-card.js +5 -12
- package/dist/collection/components/sd-modal-card/sd-modal-card.js.map +1 -1
- package/dist/components/sd-modal-card.js +2 -8
- package/dist/components/sd-modal-card.js.map +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-0a4afc3a.entry.js +2 -0
- package/dist/design-system/p-0a4afc3a.entry.js.map +1 -0
- package/dist/esm/sd-modal-card.entry.js +2 -8
- package/dist/esm/sd-modal-card.entry.js.map +1 -1
- package/dist/types/components/sd-modal-card/sd-modal-card.d.ts +1 -1
- package/dist/types/components.d.ts +1 -7
- package/hydrate/index.js +2 -8
- package/hydrate/index.mjs +2 -8
- package/package.json +1 -1
- package/dist/design-system/p-eb0b0cfe.entry.js +0 -2
- package/dist/design-system/p-eb0b0cfe.entry.js.map +0 -1
|
@@ -16,13 +16,7 @@ const SdModalCard = class {
|
|
|
16
16
|
useCloseButton = true;
|
|
17
17
|
modalTitle = 'normal';
|
|
18
18
|
buttonFlexDirection = 'row';
|
|
19
|
-
buttonProps
|
|
20
|
-
{
|
|
21
|
-
label: '확인',
|
|
22
|
-
color: 'grey_80',
|
|
23
|
-
size: 'md',
|
|
24
|
-
},
|
|
25
|
-
];
|
|
19
|
+
buttonProps;
|
|
26
20
|
message = [];
|
|
27
21
|
modalClass = '';
|
|
28
22
|
close;
|
|
@@ -46,7 +40,7 @@ const SdModalCard = class {
|
|
|
46
40
|
return modalClass;
|
|
47
41
|
}
|
|
48
42
|
render() {
|
|
49
|
-
return (index.h("div", { key: '
|
|
43
|
+
return (index.h("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (index.h("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (index.h("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), index.h("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), index.h("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, index.h("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (index.h("p", { class: "sd-modal-card__message" }, msg))))), index.h("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (index.h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
|
|
50
44
|
}
|
|
51
45
|
};
|
|
52
46
|
SdModalCard.style = sdModalCardCss();
|
|
@@ -6,13 +6,7 @@ export class SdModalCard {
|
|
|
6
6
|
useCloseButton = true;
|
|
7
7
|
modalTitle = 'normal';
|
|
8
8
|
buttonFlexDirection = 'row';
|
|
9
|
-
buttonProps
|
|
10
|
-
{
|
|
11
|
-
label: '확인',
|
|
12
|
-
color: 'grey_80',
|
|
13
|
-
size: 'md',
|
|
14
|
-
},
|
|
15
|
-
];
|
|
9
|
+
buttonProps;
|
|
16
10
|
message = [];
|
|
17
11
|
modalClass = '';
|
|
18
12
|
close;
|
|
@@ -36,7 +30,7 @@ export class SdModalCard {
|
|
|
36
30
|
return modalClass;
|
|
37
31
|
}
|
|
38
32
|
render() {
|
|
39
|
-
return (h("div", { key: '
|
|
33
|
+
return (h("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, h("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
|
|
40
34
|
}
|
|
41
35
|
static get is() { return "sd-modal-card"; }
|
|
42
36
|
static get originalStyleUrls() {
|
|
@@ -156,7 +150,7 @@ export class SdModalCard {
|
|
|
156
150
|
"mutable": false,
|
|
157
151
|
"complexType": {
|
|
158
152
|
"original": "SdModalCardButtonProps[]",
|
|
159
|
-
"resolved": "SdModalCardButtonProps[]",
|
|
153
|
+
"resolved": "SdModalCardButtonProps[] | undefined",
|
|
160
154
|
"references": {
|
|
161
155
|
"SdModalCardButtonProps": {
|
|
162
156
|
"location": "local",
|
|
@@ -166,14 +160,13 @@ export class SdModalCard {
|
|
|
166
160
|
}
|
|
167
161
|
},
|
|
168
162
|
"required": false,
|
|
169
|
-
"optional":
|
|
163
|
+
"optional": true,
|
|
170
164
|
"docs": {
|
|
171
165
|
"tags": [],
|
|
172
166
|
"text": ""
|
|
173
167
|
},
|
|
174
168
|
"getter": false,
|
|
175
|
-
"setter": false
|
|
176
|
-
"defaultValue": "[\n {\n label: '\uD655\uC778',\n color: 'grey_80',\n size: 'md',\n },\n ]"
|
|
169
|
+
"setter": false
|
|
177
170
|
},
|
|
178
171
|
"message": {
|
|
179
172
|
"type": "unknown",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-modal-card.js","sourceRoot":"","sources":["../../../src/components/sd-modal-card/sd-modal-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAgBjD,MAAM,OAAO,WAAW;IACf,IAAI,GAAkC,MAAM,CAAC;IAC7C,MAAM,GAAuC,QAAQ,CAAC;IACtD,cAAc,GAAY,IAAI,CAAC;IAC/B,UAAU,GAAW,QAAQ,CAAC;IAC9B,mBAAmB,GAAqB,KAAK,CAAC;IAC9C,WAAW,
|
|
1
|
+
{"version":3,"file":"sd-modal-card.js","sourceRoot":"","sources":["../../../src/components/sd-modal-card/sd-modal-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' | 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\n @Prop() buttonProps?: SdModalCardButtonProps[];\n @Prop() message: string[] = [];\n @Prop()\n modalClass: string = '';\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<MouseEvent>;\n @Event({ eventName: 'sdConfirm' }) confirm!: EventEmitter<MouseEvent>;\n\n private get pointColor(): string {\n if (this.type !== 'normal') {\n return 'grey_95';\n }\n\n switch (this.system) {\n case 'positive':\n return resolveColor('brilliantblue_75');\n case 'negative':\n return resolveColor('red_75');\n default:\n return resolveColor('grey_95');\n }\n }\n\n private get getModalClass(): string {\n let modalClass = `sd-modal-card ${this.modalClass}`;\n modalClass += ' ' + `sd-modal-card-${this.system}`;\n return modalClass;\n }\n\n render() {\n return (\n <div class={this.getModalClass} style={{ '--point-color': this.pointColor }}>\n {this.useCloseButton && (\n <sd-icon\n class=\"sd-modal-card__close-button\"\n name=\"close\"\n size=\"20\"\n color=\"grey_65\"\n onClick={() => this.close.emit()}\n />\n )}\n {this.type !== 'normal' && (\n <sd-icon\n class=\"sd-modal-card__icon\"\n name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\n size=\"32\"\n color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\n />\n )}\n <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\n <slot>\n <div class={`sd-modal-card__message-container`}>\n {this.message.map(msg => (\n <p class=\"sd-modal-card__message\">{msg}</p>\n ))}\n </div>\n </slot>\n <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\n {this.buttonProps?.map(button => (\n <sd-button\n class={'sd-modal-card__button'}\n variant={button.variant ? button.variant : 'outline'}\n label={button.label}\n color={button.color}\n size={button.size}\n onClick={() =>\n !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit()\n }\n {...(button.class && { class: button.class })}\n ></sd-button>\n ))}\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -19,13 +19,7 @@ const SdModalCard$1 = /*@__PURE__*/ proxyCustomElement(class SdModalCard extends
|
|
|
19
19
|
useCloseButton = true;
|
|
20
20
|
modalTitle = 'normal';
|
|
21
21
|
buttonFlexDirection = 'row';
|
|
22
|
-
buttonProps
|
|
23
|
-
{
|
|
24
|
-
label: '확인',
|
|
25
|
-
color: 'grey_80',
|
|
26
|
-
size: 'md',
|
|
27
|
-
},
|
|
28
|
-
];
|
|
22
|
+
buttonProps;
|
|
29
23
|
message = [];
|
|
30
24
|
modalClass = '';
|
|
31
25
|
close;
|
|
@@ -49,7 +43,7 @@ const SdModalCard$1 = /*@__PURE__*/ proxyCustomElement(class SdModalCard extends
|
|
|
49
43
|
return modalClass;
|
|
50
44
|
}
|
|
51
45
|
render() {
|
|
52
|
-
return (h("div", { key: '
|
|
46
|
+
return (h("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, h("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
|
|
53
47
|
}
|
|
54
48
|
static get style() { return sdModalCardCss(); }
|
|
55
49
|
}, [772, "sd-modal-card", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"sd-modal-card.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,m8BAAm8B,CAAC;;MCiBr9BA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACf,IAAI,GAAkC,MAAM;IAC5C,MAAM,GAAuC,QAAQ;IACrD,cAAc,GAAY,IAAI;IAC9B,UAAU,GAAW,QAAQ;IAC7B,mBAAmB,GAAqB,KAAK;AAC7C,IAAA,WAAW
|
|
1
|
+
{"file":"sd-modal-card.js","mappings":"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","names":["SdModalCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\n\nsd-modal-card {\n display: block;\n .sd-modal-card {\n position: relative;\n padding: 40px 32px;\n border-radius: 8px;\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\n background: white;\n\n &__close-button {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n }\n\n sd-icon.sd-modal-card__icon {\n display: block;\n width: 32px;\n height: 32px;\n margin: 0 auto 12px auto;\n }\n\n &__title {\n color: var(--point-color);\n font-size: 18px;\n font-weight: 700;\n line-height: 30px;\n text-align: center;\n margin: 0 0 20px 0;\n }\n\n &__message {\n color: $grey_95;\n font-weight: 400;\n font-size: 12px;\n line-height: 22px;\n text-align: center;\n margin: 0;\n }\n\n &__button-container {\n display: flex;\n margin: 32px auto 0 auto;\n justify-content: center;\n align-items: center;\n gap: 8px;\n &.flex-column {\n flex-direction: column;\n }\n button.sd-modal-card__button {\n width: 89px;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' | 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\n @Prop() buttonProps?: SdModalCardButtonProps[];\n @Prop() message: string[] = [];\n @Prop()\n modalClass: string = '';\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<MouseEvent>;\n @Event({ eventName: 'sdConfirm' }) confirm!: EventEmitter<MouseEvent>;\n\n private get pointColor(): string {\n if (this.type !== 'normal') {\n return 'grey_95';\n }\n\n switch (this.system) {\n case 'positive':\n return resolveColor('brilliantblue_75');\n case 'negative':\n return resolveColor('red_75');\n default:\n return resolveColor('grey_95');\n }\n }\n\n private get getModalClass(): string {\n let modalClass = `sd-modal-card ${this.modalClass}`;\n modalClass += ' ' + `sd-modal-card-${this.system}`;\n return modalClass;\n }\n\n render() {\n return (\n <div class={this.getModalClass} style={{ '--point-color': this.pointColor }}>\n {this.useCloseButton && (\n <sd-icon\n class=\"sd-modal-card__close-button\"\n name=\"close\"\n size=\"20\"\n color=\"grey_65\"\n onClick={() => this.close.emit()}\n />\n )}\n {this.type !== 'normal' && (\n <sd-icon\n class=\"sd-modal-card__icon\"\n name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\n size=\"32\"\n color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\n />\n )}\n <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\n <slot>\n <div class={`sd-modal-card__message-container`}>\n {this.message.map(msg => (\n <p class=\"sd-modal-card__message\">{msg}</p>\n ))}\n </div>\n </slot>\n <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\n {this.buttonProps?.map(button => (\n <sd-button\n class={'sd-modal-card__button'}\n variant={button.variant ? button.variant : 'outline'}\n label={button.label}\n color={button.color}\n size={button.size}\n onClick={() =>\n !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit()\n }\n {...(button.class && { class: button.class })}\n ></sd-button>\n ))}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,g as l,b as a}from"./p-DqSa0XJ6.js";export{s as setNonce}from"./p-DqSa0XJ6.js";var o=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};o().then((async e=>{await l();return a(JSON.parse('[["p-1616a1f6",[[768,"sd-select-multiple",{"value":[1040],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"autoFocus":[4,"auto-focus"],"disabled":[4],"clearable":[4],"searchable":[4],"useAll":[4,"use-all"],"useCheckbox":[4,"use-checkbox"],"label":[1],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"name":[1],"rules":[16],"error":[4],"optionRenderer":[16],"isOpen":[32],"itemIndex":[32],"isScrolled":[32],"sdOpen":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-cf3abaa3",[[772,"sd-select-multiple-group",{"value":[1040],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"allCheckedLabel":[1,"all-checked-label"],"allCheckOptionLabel":[1,"all-check-option-label"],"label":[1],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"name":[1],"rules":[16],"error":[4],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32],"isDropdownReady":[32],"sdOpen":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["p-c9f84db8",[[770,"sd-date-picker",{"value":[1537],"label":[1],"selectable":[16],"disabled":[4],"placeholder":[1],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["p-d6c96502",[[770,"sd-date-range-picker",{"value":[1040],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"placeholder":[1],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]},null,{"value":["onValueChange"]}]]],["p-13f853e4",[[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupTitle":[1,"popup-title"],"popupWidth":[2,"popup-width"],"popupShow":[32]}]]],["p-390feb8e",[[768,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["p-eb0b0cfe",[[772,"sd-modal-card",{"type":[1],"system":[1],"useCloseButton":[4,"use-close-button"],"modalTitle":[1,"modal-title"],"buttonFlexDirection":[1,"button-flex-direction"],"buttonProps":[16],"message":[16],"modalClass":[1,"modal-class"]}]]],["p-a586a211",[[768,"sd-toast-message",{"icon":[1],"message":[1],"link":[1],"linkLabel":[1,"link-label"],"buttonLabel":[1,"button-label"],"useClose":[4,"use-close"],"type":[1],"isVisible":[32]}]]],["p-b85f4c0d",[[768,"sd-file-picker",{"value":[1040],"placeholder":[1],"disabled":[4],"inline":[4],"multiple":[4],"accept":[1],"internalValue":[32],"hovered":[32],"showTooltip":[32]},null,{"value":["valueChanged"]}]]],["p-29b74787",[[768,"sd-number-input",{"min":[2],"max":[2],"step":[2],"useButton":[4,"use-button"],"useDecimal":[4,"use-decimal"],"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"width":[8],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"displayValue":[32],"hovered":[32],"error":[32],"sdGetNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}]]],["p-7a157bdd",[[768,"sd-radio-group",{"value":[1544],"radioOptions":[1040],"direction":[1],"disabled":[4],"groupName":[1,"group-name"]},null,{"value":["valueChanged"]}]]],["p-1e724f80",[[768,"sd-tabs",{"value":[1537],"tabs":[1040],"size":[1],"isSub":[4,"is-sub"]},null,{"value":["valueChanged"]}]]],["p-bde70018",[[768,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["p-1b6885d9",[[772,"sd-card",{"bordered":[4],"cardClassName":[1,"card-class-name"]}]]],["p-4f76d1a2",[[772,"sd-form",{"formClass":[1,"form-class"],"sdRegisterField":[64],"sdUnregisterField":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidation":[64]}]]],["p-44af67a6",[[768,"sd-progress",{"type":[1],"error":[4],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["p-0b7471fc",[[768,"sd-radio-button-group",{"value":[1032],"radioOptions":[1040],"size":[1],"disabled":[4],"name":[1]}]]],["p-cb502581",[[768,"sd-toggle",{"value":[1028],"label":[1],"disabled":[4]}]]],["p-1d6dabd7",[[768,"sd-toggle-button",{"value":[1540],"label":[1],"disabled":[4],"isActive":[32]}]]],["p-93e3969d",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["p-9cf030c0",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]],["p-54376630",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"headerCellRenderer":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"useVirtualScroll":[16],"virtualRowHeight":[2,"virtual-row-height"],"virtualColumnWidth":[2,"virtual-column-width"],"virtualBufferSize":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32],"virtualStartIndex":[32],"virtualEndIndex":[32],"scrollTopPosition":[32],"virtualStartColIdx":[32],"virtualEndColIdx":[32],"scrollLeftPosition":[32]},null,{"columns":["handleColumnsChange"],"columnWidths":["handleColumnWidthsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-textarea",{"value":[1025],"name":[1],"disabled":[4],"autoFocus":[4,"auto-focus"],"textareaClass":[1,"textarea-class"],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"placeholder":[1],"internalValue":[32],"focused":[32],"hovered":[32],"sdFocus":[64],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[768,"sd-select",{"value":[1032],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"autoFocus":[4,"auto-focus"],"disabled":[4],"clearable":[4],"searchable":[4],"label":[1],"insideLabel":[4,"inside-label"],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"rules":[16],"error":[4],"optionRenderer":[16],"isOpen":[32],"itemIndex":[32],"isScrolled":[32],"sdOpen":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"isOpen":["isOpenChanged"]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]}],[768,"sd-loading-spinner",{"color":[1]}],[768,"sd-radio",{"value":[1544],"disabled":[4],"val":[1],"label":[1]}],[772,"sd-select-dropdown",{"itemIndex":[1026,"item-index"],"value":[8],"options":[16],"width":[1],"dropdownHeight":[1,"dropdown-height"],"searchable":[4],"optionPlaceholder":[1,"option-placeholder"],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"filteredOptions":[32],"searchText":[32],"isScrolled":[32],"isDropdownReady":[32]},null,{"filteredOptions":["filteredOptionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"]}],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"sdIsDisabled":[64]}],[768,"sd-select-search-input",{"isScrolled":[4,"is-scrolled"],"searchText":[1,"search-text"],"sdGetNativeElement":[64],"sdSearchInputFocus":[64]}],[768,"sd-checkbox",{"value":[1028],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"value":["watchValueHandler"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[772,"sd-input",{"value":[1032],"type":[1],"insideLabel":[4,"inside-label"],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"error":[1028],"focused":[1028],"hovered":[1028],"label":[1],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"inputStyle":[16],"internalValue":[32],"sdGetNativeElement":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-field",{"name":[1],"rules":[16],"error":[1028],"disabled":[1028],"hovered":[1028],"focused":[1028],"status":[1],"label":[1],"insideLabel":[4,"inside-label"],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"errorMsg":[32],"sdValidate":[64],"sdReset":[64],"sdResetValidation":[64],"sdFocus":[64]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContentHTML":[32]}],[772,"sd-floating-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["p-cb3dd19f",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]]]'),e)}));
|
|
1
|
+
import{p as e,g as l,b as a}from"./p-DqSa0XJ6.js";export{s as setNonce}from"./p-DqSa0XJ6.js";var o=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};o().then((async e=>{await l();return a(JSON.parse('[["p-1616a1f6",[[768,"sd-select-multiple",{"value":[1040],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"autoFocus":[4,"auto-focus"],"disabled":[4],"clearable":[4],"searchable":[4],"useAll":[4,"use-all"],"useCheckbox":[4,"use-checkbox"],"label":[1],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"name":[1],"rules":[16],"error":[4],"optionRenderer":[16],"isOpen":[32],"itemIndex":[32],"isScrolled":[32],"sdOpen":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-cf3abaa3",[[772,"sd-select-multiple-group",{"value":[1040],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"allCheckedLabel":[1,"all-checked-label"],"allCheckOptionLabel":[1,"all-check-option-label"],"label":[1],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"name":[1],"rules":[16],"error":[4],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32],"isDropdownReady":[32],"sdOpen":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["p-c9f84db8",[[770,"sd-date-picker",{"value":[1537],"label":[1],"selectable":[16],"disabled":[4],"placeholder":[1],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["p-d6c96502",[[770,"sd-date-range-picker",{"value":[1040],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"placeholder":[1],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]},null,{"value":["onValueChange"]}]]],["p-13f853e4",[[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupTitle":[1,"popup-title"],"popupWidth":[2,"popup-width"],"popupShow":[32]}]]],["p-390feb8e",[[768,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["p-0a4afc3a",[[772,"sd-modal-card",{"type":[1],"system":[1],"useCloseButton":[4,"use-close-button"],"modalTitle":[1,"modal-title"],"buttonFlexDirection":[1,"button-flex-direction"],"buttonProps":[16],"message":[16],"modalClass":[1,"modal-class"]}]]],["p-a586a211",[[768,"sd-toast-message",{"icon":[1],"message":[1],"link":[1],"linkLabel":[1,"link-label"],"buttonLabel":[1,"button-label"],"useClose":[4,"use-close"],"type":[1],"isVisible":[32]}]]],["p-b85f4c0d",[[768,"sd-file-picker",{"value":[1040],"placeholder":[1],"disabled":[4],"inline":[4],"multiple":[4],"accept":[1],"internalValue":[32],"hovered":[32],"showTooltip":[32]},null,{"value":["valueChanged"]}]]],["p-29b74787",[[768,"sd-number-input",{"min":[2],"max":[2],"step":[2],"useButton":[4,"use-button"],"useDecimal":[4,"use-decimal"],"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"width":[8],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"displayValue":[32],"hovered":[32],"error":[32],"sdGetNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}]]],["p-7a157bdd",[[768,"sd-radio-group",{"value":[1544],"radioOptions":[1040],"direction":[1],"disabled":[4],"groupName":[1,"group-name"]},null,{"value":["valueChanged"]}]]],["p-1e724f80",[[768,"sd-tabs",{"value":[1537],"tabs":[1040],"size":[1],"isSub":[4,"is-sub"]},null,{"value":["valueChanged"]}]]],["p-bde70018",[[768,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["p-1b6885d9",[[772,"sd-card",{"bordered":[4],"cardClassName":[1,"card-class-name"]}]]],["p-4f76d1a2",[[772,"sd-form",{"formClass":[1,"form-class"],"sdRegisterField":[64],"sdUnregisterField":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidation":[64]}]]],["p-44af67a6",[[768,"sd-progress",{"type":[1],"error":[4],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["p-0b7471fc",[[768,"sd-radio-button-group",{"value":[1032],"radioOptions":[1040],"size":[1],"disabled":[4],"name":[1]}]]],["p-cb502581",[[768,"sd-toggle",{"value":[1028],"label":[1],"disabled":[4]}]]],["p-1d6dabd7",[[768,"sd-toggle-button",{"value":[1540],"label":[1],"disabled":[4],"isActive":[32]}]]],["p-93e3969d",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["p-9cf030c0",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]],["p-54376630",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"headerCellRenderer":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"useVirtualScroll":[16],"virtualRowHeight":[2,"virtual-row-height"],"virtualColumnWidth":[2,"virtual-column-width"],"virtualBufferSize":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32],"virtualStartIndex":[32],"virtualEndIndex":[32],"scrollTopPosition":[32],"virtualStartColIdx":[32],"virtualEndColIdx":[32],"scrollLeftPosition":[32]},null,{"columns":["handleColumnsChange"],"columnWidths":["handleColumnWidthsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-textarea",{"value":[1025],"name":[1],"disabled":[4],"autoFocus":[4,"auto-focus"],"textareaClass":[1,"textarea-class"],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"placeholder":[1],"internalValue":[32],"focused":[32],"hovered":[32],"sdFocus":[64],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[768,"sd-select",{"value":[1032],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"autoFocus":[4,"auto-focus"],"disabled":[4],"clearable":[4],"searchable":[4],"label":[1],"insideLabel":[4,"inside-label"],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"rules":[16],"error":[4],"optionRenderer":[16],"isOpen":[32],"itemIndex":[32],"isScrolled":[32],"sdOpen":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"isOpen":["isOpenChanged"]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]}],[768,"sd-loading-spinner",{"color":[1]}],[768,"sd-radio",{"value":[1544],"disabled":[4],"val":[1],"label":[1]}],[772,"sd-select-dropdown",{"itemIndex":[1026,"item-index"],"value":[8],"options":[16],"width":[1],"dropdownHeight":[1,"dropdown-height"],"searchable":[4],"optionPlaceholder":[1,"option-placeholder"],"useCheckbox":[4,"use-checkbox"],"useAll":[4,"use-all"],"filteredOptions":[32],"searchText":[32],"isScrolled":[32],"isDropdownReady":[32]},null,{"filteredOptions":["filteredOptionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"]}],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"sdIsDisabled":[64]}],[768,"sd-select-search-input",{"isScrolled":[4,"is-scrolled"],"searchText":[1,"search-text"],"sdGetNativeElement":[64],"sdSearchInputFocus":[64]}],[768,"sd-checkbox",{"value":[1028],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"value":["watchValueHandler"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[772,"sd-input",{"value":[1032],"type":[1],"insideLabel":[4,"inside-label"],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"error":[1028],"focused":[1028],"hovered":[1028],"label":[1],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"inputStyle":[16],"internalValue":[32],"sdGetNativeElement":[64],"sdValidate":[64],"sdReset":[64],"sdResetValidate":[64],"sdFocus":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-field",{"name":[1],"rules":[16],"error":[1028],"disabled":[1028],"hovered":[1028],"focused":[1028],"status":[1],"label":[1],"insideLabel":[4,"inside-label"],"useLabelRequired":[4,"use-label-required"],"labelTooltip":[1,"label-tooltip"],"labelTooltipProps":[16],"errorMsg":[32],"sdValidate":[64],"sdReset":[64],"sdResetValidation":[64],"sdFocus":[64]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContentHTML":[32]}],[772,"sd-floating-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["p-cb3dd19f",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=design-system.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,c as d,h as o}from"./p-DqSa0XJ6.js";import{r as t}from"./p-DcGvp3RM.js";const s=()=>`sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;const e=class{constructor(o){a(this,o);this.close=d(this,"sdClose");this.confirm=d(this,"sdConfirm")}type="info";system="normal";useCloseButton=true;modalTitle="normal";buttonFlexDirection="row";buttonProps;message=[];modalClass="";close;confirm;get pointColor(){if(this.type!=="normal"){return"grey_95"}switch(this.system){case"positive":return t("brilliantblue_75");case"negative":return t("red_75");default:return t("grey_95")}}get getModalClass(){let a=`sd-modal-card ${this.modalClass}`;a+=" "+`sd-modal-card-${this.system}`;return a}render(){return o("div",{key:"7374943ac733d43b7d6c027f074c2dfdfd859e51",class:this.getModalClass,style:{"--point-color":this.pointColor}},this.useCloseButton&&o("sd-icon",{key:"75fd15b1241d8b4829372377a8212556828ef2f9",class:"sd-modal-card__close-button",name:"close",size:"20",color:"grey_65",onClick:()=>this.close.emit()}),this.type!=="normal"&&o("sd-icon",{key:"54619f342718bb9dd0589d5963ad390f1b792843",class:"sd-modal-card__icon",name:this.type==="info"?"notificationOutline":"warningOutline",size:"32",color:this.type==="info"?"brilliantblue_75":"red_75"}),o("h2",{key:"4197761d82baa632c67ff238388aa3162592d9ed",class:"sd-modal-card__title"},this.modalTitle),o("slot",{key:"586ee3e295b2091d657d54f17945d4ac12541932"},o("div",{key:"dad5890bd4d0dfcfca45811ae58fe3e67d29e226",class:`sd-modal-card__message-container`},this.message.map((a=>o("p",{class:"sd-modal-card__message"},a))))),o("div",{key:"3af309aaa37574e5a3e74cbb3c9047216c1b74a8",class:`sd-modal-card__button-container flex-${this.buttonFlexDirection}`},this.buttonProps?.map((a=>o("sd-button",{class:"sd-modal-card__button",variant:a.variant?a.variant:"outline",label:a.label,color:a.color,size:a.size,onClick:()=>!a.type||a.type==="confirm"?this.confirm.emit():this.close.emit(),...a.class&&{class:a.class}})))))}};e.style=s();export{e as sd_modal_card};
|
|
2
|
+
//# sourceMappingURL=p-0a4afc3a.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["registerInstance","createEvent","h","resolveColor","sdModalCardCss","SdModalCard","constructor","hostRef","this","close","confirm","type","system","useCloseButton","modalTitle","buttonFlexDirection","buttonProps","message","modalClass","pointColor","getModalClass","render","key","class","style","name","size","color","onClick","emit","map","msg","button","variant","label"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,MAAS,8BAC7CC,MAAoB,kBAElC,MAAMC,EAAiB,IAAM,s8BAE7B,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GACvBC,KAAKC,MAAQR,EAAYO,KAAM,WAC/BA,KAAKE,QAAUT,EAAYO,KAAM,YACrC,CACAG,KAAO,OACPC,OAAS,SACTC,eAAiB,KACjBC,WAAa,SACbC,oBAAsB,MACtBC,YACAC,QAAU,GACVC,WAAa,GACbT,MACAC,QACA,cAAIS,GACA,GAAIX,KAAKG,OAAS,SAAU,CACxB,MAAO,SACX,CACA,OAAQH,KAAKI,QACT,IAAK,WACD,OAAOT,EAAa,oBACxB,IAAK,WACD,OAAOA,EAAa,UACxB,QACI,OAAOA,EAAa,WAEhC,CACA,iBAAIiB,GACA,IAAIF,EAAa,iBAAiBV,KAAKU,aACvCA,GAAc,IAAM,iBAAiBV,KAAKI,SAC1C,OAAOM,CACX,CACA,MAAAG,GACI,OAAQnB,EAAE,MAAO,CAAEoB,IAAK,2CAA4CC,MAAOf,KAAKY,cAAeI,MAAO,CAAE,gBAAiBhB,KAAKW,aAAgBX,KAAKK,gBAAmBX,EAAE,UAAW,CAAEoB,IAAK,2CAA4CC,MAAO,8BAA+BE,KAAM,QAASC,KAAM,KAAMC,MAAO,UAAWC,QAAS,IAAMpB,KAAKC,MAAMoB,SAAYrB,KAAKG,OAAS,UAAaT,EAAE,UAAW,CAAEoB,IAAK,2CAA4CC,MAAO,sBAAuBE,KAAMjB,KAAKG,OAAS,OAAS,sBAAwB,iBAAkBe,KAAM,KAAMC,MAAOnB,KAAKG,OAAS,OAAS,mBAAqB,WAAcT,EAAE,KAAM,CAAEoB,IAAK,2CAA4CC,MAAO,wBAA0Bf,KAAKM,YAAaZ,EAAE,OAAQ,CAAEoB,IAAK,4CAA8CpB,EAAE,MAAO,CAAEoB,IAAK,2CAA4CC,MAAO,oCAAsCf,KAAKS,QAAQa,KAAIC,GAAQ7B,EAAE,IAAK,CAAEqB,MAAO,0BAA4BQ,OAAU7B,EAAE,MAAO,CAAEoB,IAAK,2CAA4CC,MAAO,wCAAwCf,KAAKO,uBAAyBP,KAAKQ,aAAac,KAAIE,GAAW9B,EAAE,YAAa,CAAEqB,MAAO,wBAAyBU,QAASD,EAAOC,QAAUD,EAAOC,QAAU,UAAWC,MAAOF,EAAOE,MAAOP,MAAOK,EAAOL,MAAOD,KAAMM,EAAON,KAAME,QAAS,KAAOI,EAAOrB,MAAQqB,EAAOrB,OAAS,UAAYH,KAAKE,QAAQmB,OAASrB,KAAKC,MAAMoB,UAAYG,EAAOT,OAAS,CAAEA,MAAOS,EAAOT,YAC36C,GAEJlB,EAAYmB,MAAQpB,WAEXC","ignoreList":[]}
|
|
@@ -14,13 +14,7 @@ const SdModalCard = class {
|
|
|
14
14
|
useCloseButton = true;
|
|
15
15
|
modalTitle = 'normal';
|
|
16
16
|
buttonFlexDirection = 'row';
|
|
17
|
-
buttonProps
|
|
18
|
-
{
|
|
19
|
-
label: '확인',
|
|
20
|
-
color: 'grey_80',
|
|
21
|
-
size: 'md',
|
|
22
|
-
},
|
|
23
|
-
];
|
|
17
|
+
buttonProps;
|
|
24
18
|
message = [];
|
|
25
19
|
modalClass = '';
|
|
26
20
|
close;
|
|
@@ -44,7 +38,7 @@ const SdModalCard = class {
|
|
|
44
38
|
return modalClass;
|
|
45
39
|
}
|
|
46
40
|
render() {
|
|
47
|
-
return (h("div", { key: '
|
|
41
|
+
return (h("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, h("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
|
|
48
42
|
}
|
|
49
43
|
};
|
|
50
44
|
SdModalCard.style = sdModalCardCss();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-modal-card.entry.js","sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\n\nsd-modal-card {\n display: block;\n .sd-modal-card {\n position: relative;\n padding: 40px 32px;\n border-radius: 8px;\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\n background: white;\n\n &__close-button {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n }\n\n sd-icon.sd-modal-card__icon {\n display: block;\n width: 32px;\n height: 32px;\n margin: 0 auto 12px auto;\n }\n\n &__title {\n color: var(--point-color);\n font-size: 18px;\n font-weight: 700;\n line-height: 30px;\n text-align: center;\n margin: 0 0 20px 0;\n }\n\n &__message {\n color: $grey_95;\n font-weight: 400;\n font-size: 12px;\n line-height: 22px;\n text-align: center;\n margin: 0;\n }\n\n &__button-container {\n display: flex;\n margin: 32px auto 0 auto;\n justify-content: center;\n align-items: center;\n gap: 8px;\n &.flex-column {\n flex-direction: column;\n }\n button.sd-modal-card__button {\n width: 89px;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' | 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\n @Prop() buttonProps
|
|
1
|
+
{"version":3,"file":"sd-modal-card.entry.js","sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\n\nsd-modal-card {\n display: block;\n .sd-modal-card {\n position: relative;\n padding: 40px 32px;\n border-radius: 8px;\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\n background: white;\n\n &__close-button {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n }\n\n sd-icon.sd-modal-card__icon {\n display: block;\n width: 32px;\n height: 32px;\n margin: 0 auto 12px auto;\n }\n\n &__title {\n color: var(--point-color);\n font-size: 18px;\n font-weight: 700;\n line-height: 30px;\n text-align: center;\n margin: 0 0 20px 0;\n }\n\n &__message {\n color: $grey_95;\n font-weight: 400;\n font-size: 12px;\n line-height: 22px;\n text-align: center;\n margin: 0;\n }\n\n &__button-container {\n display: flex;\n margin: 32px auto 0 auto;\n justify-content: center;\n align-items: center;\n gap: 8px;\n &.flex-column {\n flex-direction: column;\n }\n button.sd-modal-card__button {\n width: 89px;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' | 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\n @Prop() buttonProps?: SdModalCardButtonProps[];\n @Prop() message: string[] = [];\n @Prop()\n modalClass: string = '';\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<MouseEvent>;\n @Event({ eventName: 'sdConfirm' }) confirm!: EventEmitter<MouseEvent>;\n\n private get pointColor(): string {\n if (this.type !== 'normal') {\n return 'grey_95';\n }\n\n switch (this.system) {\n case 'positive':\n return resolveColor('brilliantblue_75');\n case 'negative':\n return resolveColor('red_75');\n default:\n return resolveColor('grey_95');\n }\n }\n\n private get getModalClass(): string {\n let modalClass = `sd-modal-card ${this.modalClass}`;\n modalClass += ' ' + `sd-modal-card-${this.system}`;\n return modalClass;\n }\n\n render() {\n return (\n <div class={this.getModalClass} style={{ '--point-color': this.pointColor }}>\n {this.useCloseButton && (\n <sd-icon\n class=\"sd-modal-card__close-button\"\n name=\"close\"\n size=\"20\"\n color=\"grey_65\"\n onClick={() => this.close.emit()}\n />\n )}\n {this.type !== 'normal' && (\n <sd-icon\n class=\"sd-modal-card__icon\"\n name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\n size=\"32\"\n color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\n />\n )}\n <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\n <slot>\n <div class={`sd-modal-card__message-container`}>\n {this.message.map(msg => (\n <p class=\"sd-modal-card__message\">{msg}</p>\n ))}\n </div>\n </slot>\n <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\n {this.buttonProps?.map(button => (\n <sd-button\n class={'sd-modal-card__button'}\n variant={button.variant ? button.variant : 'outline'}\n label={button.label}\n color={button.color}\n size={button.size}\n onClick={() =>\n !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit()\n }\n {...(button.class && { class: button.class })}\n ></sd-button>\n ))}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ export declare class SdModalCard {
|
|
|
14
14
|
useCloseButton: boolean;
|
|
15
15
|
modalTitle: string;
|
|
16
16
|
buttonFlexDirection: 'row' | 'column';
|
|
17
|
-
buttonProps
|
|
17
|
+
buttonProps?: SdModalCardButtonProps[];
|
|
18
18
|
message: string[];
|
|
19
19
|
modalClass: string;
|
|
20
20
|
close: EventEmitter<MouseEvent>;
|
|
@@ -456,10 +456,7 @@ export namespace Components {
|
|
|
456
456
|
* @default 'row'
|
|
457
457
|
*/
|
|
458
458
|
"buttonFlexDirection": 'row' | 'column';
|
|
459
|
-
|
|
460
|
-
* @default [ { label: '확인', color: 'grey_80', size: 'md', }, ]
|
|
461
|
-
*/
|
|
462
|
-
"buttonProps": SdModalCardButtonProps[];
|
|
459
|
+
"buttonProps"?: SdModalCardButtonProps[];
|
|
463
460
|
/**
|
|
464
461
|
* @default []
|
|
465
462
|
*/
|
|
@@ -2407,9 +2404,6 @@ declare namespace LocalJSX {
|
|
|
2407
2404
|
* @default 'row'
|
|
2408
2405
|
*/
|
|
2409
2406
|
"buttonFlexDirection"?: 'row' | 'column';
|
|
2410
|
-
/**
|
|
2411
|
-
* @default [ { label: '확인', color: 'grey_80', size: 'md', }, ]
|
|
2412
|
-
*/
|
|
2413
2407
|
"buttonProps"?: SdModalCardButtonProps[];
|
|
2414
2408
|
/**
|
|
2415
2409
|
* @default []
|
package/hydrate/index.js
CHANGED
|
@@ -7292,13 +7292,7 @@ class SdModalCard {
|
|
|
7292
7292
|
useCloseButton = true;
|
|
7293
7293
|
modalTitle = 'normal';
|
|
7294
7294
|
buttonFlexDirection = 'row';
|
|
7295
|
-
buttonProps
|
|
7296
|
-
{
|
|
7297
|
-
label: '확인',
|
|
7298
|
-
color: 'grey_80',
|
|
7299
|
-
size: 'md',
|
|
7300
|
-
},
|
|
7301
|
-
];
|
|
7295
|
+
buttonProps;
|
|
7302
7296
|
message = [];
|
|
7303
7297
|
modalClass = '';
|
|
7304
7298
|
close;
|
|
@@ -7322,7 +7316,7 @@ class SdModalCard {
|
|
|
7322
7316
|
return modalClass;
|
|
7323
7317
|
}
|
|
7324
7318
|
render() {
|
|
7325
|
-
return (hAsync("div", { key: '
|
|
7319
|
+
return (hAsync("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (hAsync("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (hAsync("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), hAsync("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), hAsync("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, hAsync("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (hAsync("p", { class: "sd-modal-card__message" }, msg))))), hAsync("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (hAsync("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
|
|
7326
7320
|
}
|
|
7327
7321
|
static get style() { return sdModalCardCss(); }
|
|
7328
7322
|
static get cmpMeta() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -7290,13 +7290,7 @@ class SdModalCard {
|
|
|
7290
7290
|
useCloseButton = true;
|
|
7291
7291
|
modalTitle = 'normal';
|
|
7292
7292
|
buttonFlexDirection = 'row';
|
|
7293
|
-
buttonProps
|
|
7294
|
-
{
|
|
7295
|
-
label: '확인',
|
|
7296
|
-
color: 'grey_80',
|
|
7297
|
-
size: 'md',
|
|
7298
|
-
},
|
|
7299
|
-
];
|
|
7293
|
+
buttonProps;
|
|
7300
7294
|
message = [];
|
|
7301
7295
|
modalClass = '';
|
|
7302
7296
|
close;
|
|
@@ -7320,7 +7314,7 @@ class SdModalCard {
|
|
|
7320
7314
|
return modalClass;
|
|
7321
7315
|
}
|
|
7322
7316
|
render() {
|
|
7323
|
-
return (hAsync("div", { key: '
|
|
7317
|
+
return (hAsync("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (hAsync("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (hAsync("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), hAsync("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), hAsync("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, hAsync("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (hAsync("p", { class: "sd-modal-card__message" }, msg))))), hAsync("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (hAsync("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
|
|
7324
7318
|
}
|
|
7325
7319
|
static get style() { return sdModalCardCss(); }
|
|
7326
7320
|
static get cmpMeta() { return {
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,c as d,h as o}from"./p-DqSa0XJ6.js";import{r as t}from"./p-DcGvp3RM.js";const s=()=>`sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;const e=class{constructor(o){a(this,o);this.close=d(this,"sdClose");this.confirm=d(this,"sdConfirm")}type="info";system="normal";useCloseButton=true;modalTitle="normal";buttonFlexDirection="row";buttonProps=[{label:"확인",color:"grey_80",size:"md"}];message=[];modalClass="";close;confirm;get pointColor(){if(this.type!=="normal"){return"grey_95"}switch(this.system){case"positive":return t("brilliantblue_75");case"negative":return t("red_75");default:return t("grey_95")}}get getModalClass(){let a=`sd-modal-card ${this.modalClass}`;a+=" "+`sd-modal-card-${this.system}`;return a}render(){return o("div",{key:"763beaa5cb19d7717ddf0a713ab5db30dee806f8",class:this.getModalClass,style:{"--point-color":this.pointColor}},this.useCloseButton&&o("sd-icon",{key:"6b8f9326515d246f4552eceb73186022bc6ed7d7",class:"sd-modal-card__close-button",name:"close",size:"20",color:"grey_65",onClick:()=>this.close.emit()}),this.type!=="normal"&&o("sd-icon",{key:"170e999a39f8552d35714689adb75ae1aa3c1c39",class:"sd-modal-card__icon",name:this.type==="info"?"notificationOutline":"warningOutline",size:"32",color:this.type==="info"?"brilliantblue_75":"red_75"}),o("h2",{key:"3be3ed2fe087983cf0fa10f1b1e757110ac4983d",class:"sd-modal-card__title"},this.modalTitle),o("slot",{key:"f6d282734446c3a61362b1a50631595b5522f6df"},o("div",{key:"3dd7a418947511dcd19e4c0d2dcb5cd65db6aad2",class:`sd-modal-card__message-container`},this.message.map((a=>o("p",{class:"sd-modal-card__message"},a))))),o("div",{key:"400478d5e06528b5c08fac83519a993d37a6204e",class:`sd-modal-card__button-container flex-${this.buttonFlexDirection}`},this.buttonProps.map((a=>o("sd-button",{class:"sd-modal-card__button",variant:a.variant?a.variant:"outline",label:a.label,color:a.color,size:a.size,onClick:()=>!a.type||a.type==="confirm"?this.confirm.emit():this.close.emit(),...a.class&&{class:a.class}})))))}};e.style=s();export{e as sd_modal_card};
|
|
2
|
-
//# sourceMappingURL=p-eb0b0cfe.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","createEvent","h","resolveColor","sdModalCardCss","SdModalCard","constructor","hostRef","this","close","confirm","type","system","useCloseButton","modalTitle","buttonFlexDirection","buttonProps","label","color","size","message","modalClass","pointColor","getModalClass","render","key","class","style","name","onClick","emit","map","msg","button","variant"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,MAAS,8BAC7CC,MAAoB,kBAElC,MAAMC,EAAiB,IAAM,s8BAE7B,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GACvBC,KAAKC,MAAQR,EAAYO,KAAM,WAC/BA,KAAKE,QAAUT,EAAYO,KAAM,YACrC,CACAG,KAAO,OACPC,OAAS,SACTC,eAAiB,KACjBC,WAAa,SACbC,oBAAsB,MACtBC,YAAc,CACV,CACIC,MAAO,KACPC,MAAO,UACPC,KAAM,OAGdC,QAAU,GACVC,WAAa,GACbZ,MACAC,QACA,cAAIY,GACA,GAAId,KAAKG,OAAS,SAAU,CACxB,MAAO,SACX,CACA,OAAQH,KAAKI,QACT,IAAK,WACD,OAAOT,EAAa,oBACxB,IAAK,WACD,OAAOA,EAAa,UACxB,QACI,OAAOA,EAAa,WAEhC,CACA,iBAAIoB,GACA,IAAIF,EAAa,iBAAiBb,KAAKa,aACvCA,GAAc,IAAM,iBAAiBb,KAAKI,SAC1C,OAAOS,CACX,CACA,MAAAG,GACI,OAAQtB,EAAE,MAAO,CAAEuB,IAAK,2CAA4CC,MAAOlB,KAAKe,cAAeI,MAAO,CAAE,gBAAiBnB,KAAKc,aAAgBd,KAAKK,gBAAmBX,EAAE,UAAW,CAAEuB,IAAK,2CAA4CC,MAAO,8BAA+BE,KAAM,QAAST,KAAM,KAAMD,MAAO,UAAWW,QAAS,IAAMrB,KAAKC,MAAMqB,SAAYtB,KAAKG,OAAS,UAAaT,EAAE,UAAW,CAAEuB,IAAK,2CAA4CC,MAAO,sBAAuBE,KAAMpB,KAAKG,OAAS,OAAS,sBAAwB,iBAAkBQ,KAAM,KAAMD,MAAOV,KAAKG,OAAS,OAAS,mBAAqB,WAAcT,EAAE,KAAM,CAAEuB,IAAK,2CAA4CC,MAAO,wBAA0BlB,KAAKM,YAAaZ,EAAE,OAAQ,CAAEuB,IAAK,4CAA8CvB,EAAE,MAAO,CAAEuB,IAAK,2CAA4CC,MAAO,oCAAsClB,KAAKY,QAAQW,KAAIC,GAAQ9B,EAAE,IAAK,CAAEwB,MAAO,0BAA4BM,OAAU9B,EAAE,MAAO,CAAEuB,IAAK,2CAA4CC,MAAO,wCAAwClB,KAAKO,uBAAyBP,KAAKQ,YAAYe,KAAIE,GAAW/B,EAAE,YAAa,CAAEwB,MAAO,wBAAyBQ,QAASD,EAAOC,QAAUD,EAAOC,QAAU,UAAWjB,MAAOgB,EAAOhB,MAAOC,MAAOe,EAAOf,MAAOC,KAAMc,EAAOd,KAAMU,QAAS,KAAOI,EAAOtB,MAAQsB,EAAOtB,OAAS,UAAYH,KAAKE,QAAQoB,OAAStB,KAAKC,MAAMqB,UAAYG,EAAOP,OAAS,CAAEA,MAAOO,EAAOP,YAC16C,GAEJrB,EAAYsB,MAAQvB,WAEXC","ignoreList":[]}
|