@sellmate/design-system 1.0.62 → 1.0.63

package/dist/collection/components/sd-guide/sd-guide.css

@@ -17,7 +17,7 @@ sd-button {
   --sd-button-icon-only-size: var(--sd-button-height);
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--sd-button-radius-sm, 4px);
+  border-radius: var(--sd-button-button-radius-sm, 4px);
   transition: all 0.2s ease-in-out;
   position: relative;
   overflow: hidden;
@@ -38,51 +38,51 @@ sd-button {
   text-decoration: var(--sd-button-text-decoration);
 }
 .sd-button--xs {
-  --sd-button-height: var(--sd-button-xs-height, 24px);
-  --sd-button-padding-x: var(--sd-button-xs-padding-x, 8px);
-  --sd-button-gap: var(--sd-button-xs-gap, 4px);
-  --sd-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
-  --sd-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-xs-height, 24px);
+  --sd-button-padding-x: var(--sd-button-button-xs-padding-x, 8px);
+  --sd-button-gap: var(--sd-button-button-xs-gap, 4px);
+  --sd-button-font-family: var(--sd-button-button-xs-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-xs-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-button-xs-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-xs-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-xs-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));
   line-height: 20px;
 }
 .sd-button--sm {
-  --sd-button-height: var(--sd-button-sm-height, 28px);
-  --sd-button-padding-x: var(--sd-button-sm-padding-x, 12px);
-  --sd-button-gap: var(--sd-button-sm-gap, 6px);
-  --sd-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
-  --sd-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-sm-height, 28px);
+  --sd-button-padding-x: var(--sd-button-button-sm-padding-x, 12px);
+  --sd-button-gap: var(--sd-button-button-sm-gap, 6px);
+  --sd-button-font-family: var(--sd-button-button-sm-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-sm-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-button-sm-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-sm-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-sm-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));
   line-height: 20px;
 }
 .sd-button--md {
-  --sd-button-height: var(--sd-button-md-height, 34px);
-  --sd-button-padding-x: var(--sd-button-md-padding-x, 20px);
-  --sd-button-gap: var(--sd-button-md-gap, 8px);
-  --sd-button-font-family: var(--sd-button-md-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-md-typography-font-size, 16px);
-  --sd-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-md-height, 34px);
+  --sd-button-padding-x: var(--sd-button-button-md-padding-x, 20px);
+  --sd-button-gap: var(--sd-button-button-md-gap, 8px);
+  --sd-button-font-family: var(--sd-button-button-md-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-md-typography-font-size, 16px);
+  --sd-button-font-weight: var(--sd-button-button-md-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-md-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-md-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-md-width, var(--sd-button-height));
   line-height: 26px;
 }
 .sd-button--lg {
-  --sd-button-height: var(--sd-button-lg-height, 62px);
-  --sd-button-padding-x: var(--sd-button-lg-padding-x, 28px);
-  --sd-button-gap: var(--sd-button-lg-gap, 12px);
-  --sd-button-font-family: var(--sd-button-lg-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-lg-typography-font-size, 18px);
-  --sd-button-font-weight: var(--sd-button-lg-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-lg-height, 62px);
+  --sd-button-padding-x: var(--sd-button-button-lg-padding-x, 28px);
+  --sd-button-gap: var(--sd-button-button-lg-gap, 12px);
+  --sd-button-font-family: var(--sd-button-button-lg-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-lg-typography-font-size, 18px);
+  --sd-button-font-weight: var(--sd-button-button-lg-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-lg-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-lg-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));
   line-height: 30px;
 }
 .sd-button--has-label {
@@ -107,7 +107,7 @@ sd-button {
 }
 .sd-button--outline {
   background: white;
-  border: var(--sd-button-border-width-default, 1px) solid var(--button-color);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--button-color);
   color: var(--button-color);
 }
 .sd-button--outline::before {
@@ -148,9 +148,9 @@ sd-button {
   z-index: 1;
 }
 .sd-button--disabled {
-  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);
-  background: var(--sd-button-bg-disabled, #E1E1E1);
-  color: var(--sd-button-content-disabled, #888888);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-button-text-disabled, #888888);
   cursor: not-allowed !important;
 }
 .sd-button--icon-only {

package/dist/collection/components/sd-input/sd-input.css

@@ -63,6 +63,9 @@ sd-input .sd-input__content .sd-input__native[disabled] {
   cursor: not-allowed;
   color: var(--sd-input-disabled-color);
 }
+sd-input .sd-input__content .sd-input__native[readonly] {
+  color: var(--sd-input-disabled-color);
+}
 sd-input .sd-input__content .sd-input__native::placeholder {
   color: var(--sd-input-placeholder-color);
 }

package/dist/collection/components/sd-input/sd-input.js

@@ -110,12 +110,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '16881490eb9d8d08aa0788be2dbb845b12f50269', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '04e71967c3b3f7bf4589a3aaf4505c5d67d615da', class: "sd-input__content" }, h("slot", { key: '18476a19c8825734e475116586bab2711c1d84e3', name: "prefix" }), h("input", { key: '7600e0ade86d1bca8ba6197d49bd72ef4d0778dd', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '5c98ef1acdb26a1c0f89fc04101c0315b017c08a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'f188270be3635c68d99a453eaba61f53d6bb2bc7', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'a96aaa54fe54c9d9ee5ab31537e1b6fb7b612c8f', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'd806549d41156ab414d04664e6887075ef97f307', class: "sd-input__content" }, h("slot", { key: '29f447128f6211792742a252d1ea087b5a5b413e', name: "prefix" }), h("input", { key: 'e1870c7573268e97eac820d7508e134c13c32b40', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'f12b87b5d30878a55e1224abf789b924c1fd3a0c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'dad4be5dc6e8239dedc094fe0eb02a2587dd9f9c', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'cedaceae0b81e007e4672a57c950bd6b23d045cd', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '71c5cf7565ad13f08173fc10e828ddf5f8f546b8', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

package/dist/collection/components/sd-loading-container/sd-loading-container.config.js

@@ -0,0 +1 @@
+export const LOADING_CONTAINER_DEFAULT_Z_INDEX = 10000;

package/dist/collection/components/sd-loading-container/sd-loading-container.css

@@ -0,0 +1,40 @@
+sd-loading-container .sd-loading-container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--sd-loading-container-z-index, 10000);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+  pointer-events: none;
+}
+sd-loading-container .sd-loading-container--visible {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.2s ease, visibility 0s linear 0s;
+  pointer-events: auto;
+}
+sd-loading-container .sd-loading-container__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+sd-loading-container .sd-loading-container__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+sd-loading-container .sd-loading-container__message {
+  margin: 0;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  text-align: center;
+  max-width: 400px;
+  word-break: keep-all;
+}

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -0,0 +1,83 @@
+import { h } from "@stencil/core";
+export class SdLoadingContainer {
+    visible = false;
+    message = '';
+    async show(options = {}) {
+        this.message = options.message ?? '';
+        this.visible = true;
+    }
+    async hide() {
+        this.visible = false;
+    }
+    render() {
+        return (h("div", { key: 'e4578e196ebd4ee69d424fe85c9bf651bc3382f7', class: {
+                'sd-loading-container': true,
+                'sd-loading-container--visible': this.visible,
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'ae9fae9408f9b69591554ca105abb2ece362db00', class: "sd-loading-container__backdrop" }), h("div", { key: '27d0c6518dacbb664cebb2fc76c9ceb14b2b3aac', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ace74d2550a2ddb579c61e6f8daaaf64915e8666', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'af059ecdadf7b3b3c0a0437cbc4264ff550fa3c6', class: "sd-loading-container__message" }, this.message)))));
+    }
+    static get is() { return "sd-loading-container"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-loading-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-loading-container.css"]
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "message": {}
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(options?: SdLoadingShowArgs) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "SdLoadingShowArgs",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SdLoadingShowArgs": {
+                            "location": "import",
+                            "path": "./sd-loading-container.config",
+                            "id": "src/components/sd-loading-container/sd-loading-container.config.ts::SdLoadingShowArgs",
+                            "referenceLocation": "SdLoadingShowArgs"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/sd-loading-modal/sd-loading-modal.config.js

@@ -0,0 +1,31 @@
+import modalTokens from "../../tokens/generated/component.modal.json";
+import spinnerTokens from "../../tokens/generated/component.spinner.json";
+export const LOADING_MODAL_LAYOUT = {
+    minWidth: Number(modalTokens.modal.loading.width),
+    minHeight: Number(modalTokens.modal.loading.height),
+    gap: Number(modalTokens.modal.loading.gap),
+    contentSize: Number(modalTokens.modal.loading.content),
+    radius: Number(modalTokens.modal.radius),
+};
+export const LOADING_MODAL_COLORS = {
+    bg: modalTokens.modal.bg,
+    messageColor: modalTokens.modal.loading.message.color,
+    errorIcon: modalTokens.modal.confirm.negative.icon,
+    spinnerTrack: spinnerTokens.spinner.color.track,
+    spinnerArc: spinnerTokens.spinner.color.arc,
+};
+export const LOADING_MODAL_TYPOGRAPHY = {
+    fontFamily: modalTokens.modal.loading.message.typography.fontFamily,
+    fontSize: Number(modalTokens.modal.loading.message.typography.fontSize),
+    fontWeight: Number(modalTokens.modal.loading.message.typography.fontWeight),
+    lineHeight: Number(modalTokens.modal.loading.message.typography.lineHeight),
+};
+export const LOADING_MODAL_DEFAULT_MESSAGE = {
+    loading: '작업을 진행하고 있습니다. 잠시만 기다려 주세요.',
+    error: '작업에 실패하였습니다. 다시 시도해 주세요.',
+};
+export const LOADING_MODAL_DEFAULT_BUTTON_LABEL = {
+    loading: '작업 취소',
+    error: '다시 시도',
+};
+export const LOADING_MODAL_BUTTON_PRESET = 'neutral_outline_sm';

package/dist/collection/components/sd-loading-modal/sd-loading-modal.css

@@ -0,0 +1,37 @@
+sd-loading-modal {
+  display: inline-block;
+}
+sd-loading-modal .sd-loading-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sd-loading-modal-gap);
+  min-width: var(--sd-loading-modal-min-width);
+  min-height: var(--sd-loading-modal-min-height);
+  width: var(--sd-loading-modal-width, auto);
+  height: var(--sd-loading-modal-height, auto);
+  border-radius: var(--sd-loading-modal-radius);
+  background: var(--sd-loading-modal-bg);
+  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+}
+sd-loading-modal .sd-loading-modal__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sd-loading-modal-content-size);
+  height: var(--sd-loading-modal-content-size);
+}
+sd-loading-modal .sd-loading-modal__message {
+  margin: 0;
+  color: var(--sd-loading-modal-message-color);
+  font-family: var(--sd-loading-modal-message-font-family);
+  font-size: var(--sd-loading-modal-message-font-size);
+  font-weight: var(--sd-loading-modal-message-font-weight);
+  line-height: var(--sd-loading-modal-message-line-height);
+  text-align: center;
+}
+sd-loading-modal .sd-loading-modal__button {
+  display: flex;
+  justify-content: center;
+}

package/dist/collection/components/sd-loading-modal/sd-loading-modal.js

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+import { LOADING_MODAL_BUTTON_PRESET, LOADING_MODAL_COLORS, LOADING_MODAL_DEFAULT_BUTTON_LABEL, LOADING_MODAL_DEFAULT_MESSAGE, LOADING_MODAL_LAYOUT, LOADING_MODAL_TYPOGRAPHY, } from "./sd-loading-modal.config";
+export class SdLoadingModal {
+    state = 'loading';
+    message = '';
+    buttonLabel = '';
+    width;
+    height;
+    click;
+    get resolvedMessage() {
+        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.state];
+    }
+    get resolvedButtonLabel() {
+        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.state];
+    }
+    handleClick = () => {
+        this.click.emit();
+    };
+    toCssSize(value) {
+        if (value === undefined || value === null || value === '')
+            return undefined;
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+    render() {
+        const cssVars = {
+            '--sd-loading-modal-min-width': `${LOADING_MODAL_LAYOUT.minWidth}px`,
+            '--sd-loading-modal-min-height': `${LOADING_MODAL_LAYOUT.minHeight}px`,
+            '--sd-loading-modal-gap': `${LOADING_MODAL_LAYOUT.gap}px`,
+            '--sd-loading-modal-content-size': `${LOADING_MODAL_LAYOUT.contentSize}px`,
+            '--sd-loading-modal-radius': `${LOADING_MODAL_LAYOUT.radius}px`,
+            '--sd-loading-modal-bg': LOADING_MODAL_COLORS.bg,
+            '--sd-loading-modal-message-color': LOADING_MODAL_COLORS.messageColor,
+            '--sd-loading-modal-message-font-family': LOADING_MODAL_TYPOGRAPHY.fontFamily,
+            '--sd-loading-modal-message-font-size': `${LOADING_MODAL_TYPOGRAPHY.fontSize}px`,
+            '--sd-loading-modal-message-font-weight': `${LOADING_MODAL_TYPOGRAPHY.fontWeight}`,
+            '--sd-loading-modal-message-line-height': `${LOADING_MODAL_TYPOGRAPHY.lineHeight}px`,
+            '--sd-loading-modal-error-color': LOADING_MODAL_COLORS.errorIcon,
+        };
+        const hostStyle = {
+            ...cssVars,
+            '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
+            '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
+        };
+        return (h(Host, { key: 'dcc53b3421a88970ce4ad8258285a896da0e400c', style: hostStyle }, h("div", { key: 'bb2319b861392c8a88587b7654f2c6227b226cc7', class: "sd-loading-modal" }, h("div", { key: 'f3064846c06d2cd1e9d2474dc16fe80773c4a8f7', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: '932c71930b4484d652266f85556e7eb2195a81c9', class: "sd-loading-modal__message" }, this.resolvedMessage), h("div", { key: 'e06cfa7729b72f881789d573f38116ac5086e062', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '63684aa367e552df0e020ce4766d6c34c1361427', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick })))));
+    }
+    static get is() { return "sd-loading-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-loading-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-loading-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingModalState",
+                    "resolved": "\"error\" | \"loading\"",
+                    "references": {
+                        "LoadingModalState": {
+                            "location": "import",
+                            "path": "./sd-loading-modal.config",
+                            "id": "src/components/sd-loading-modal/sd-loading-modal.config.ts::LoadingModalState",
+                            "referenceLocation": "LoadingModalState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'loading'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "sdClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}