@sellmate/design-system 0.0.49 → 0.0.50

package/dist/collection/components/sd-radio-group/sd-radio-group.js

@@ -0,0 +1,214 @@
+import { h } from "@stencil/core";
+export class SdRadioGroup {
+    value;
+    radioOptions = [];
+    direction = 'vertical';
+    disabled = false;
+    name;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleRadioChange = (optionValue, optionDisabled) => {
+        if (this.disabled || optionDisabled)
+            return;
+        this.selectedValue = optionValue;
+        this.value = optionValue;
+        this.sdChange.emit(optionValue);
+    };
+    isOptionSelected(option) {
+        return this.selectedValue === option.value;
+    }
+    isOptionDisabled(option) {
+        return this.disabled || !!option.disabled;
+    }
+    getRadioClasses(option) {
+        const classes = [
+            'sd-radio-group__option',
+            this.isOptionSelected(option)
+                ? 'sd-radio-group__option--selected'
+                : 'sd-radio-group__option--unselected',
+        ];
+        if (this.isOptionDisabled(option)) {
+            classes.push('sd-radio-group__option--disabled');
+        }
+        return classes.join(' ');
+    }
+    getGroupClasses() {
+        const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
+        return classes.join(' ');
+    }
+    render() {
+        const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
+        return (h("div", { key: 'd8f9d161395e7125bb65411ee6831e7e290900ba', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+            const isSelected = this.isOptionSelected(option);
+            const isDisabled = this.isOptionDisabled(option);
+            return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));
+        })));
+    }
+    static get is() { return "sd-radio-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "RadioValue",
+                    "resolved": "boolean | number | string",
+                    "references": {
+                        "RadioValue": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
+                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioValue"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "radioOptions": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "RadioOption[]",
+                    "resolved": "RadioOption[]",
+                    "references": {
+                        "RadioOption": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
+                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizonal' | 'vertical'",
+                    "resolved": "\"horizonal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'vertical'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RadioValue",
+                    "resolved": "boolean | number | string",
+                    "references": {
+                        "RadioValue": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
+                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioValue"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=sd-radio-group.js.map

package/dist/collection/components/sd-radio-group/sd-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-radio-group.js","sourceRoot":"","sources":["../../../src/components/sd-radio-group/sd-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type RadioValue = string | number | boolean;\r\nexport type RadioOption = {\r\n label: string;\r\n value: RadioValue;\r\n disabled?: boolean;\r\n};\r\n\r\n@Component({\r\n tag: 'sd-radio-group',\r\n styleUrl: 'sd-radio-group.scss',\r\n})\r\nexport class SdRadioGroup {\r\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\r\n\r\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\r\n\r\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() name?: string;\r\n\r\n @State() private selectedValue!: RadioValue;\r\n\r\n @Event()\r\n sdChange!: EventEmitter<RadioValue>;\r\n\r\n componentWillLoad() {\r\n  if (this.value) {\r\n   this.selectedValue = this.value;\r\n  }\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: RadioValue) {\r\n  this.selectedValue = newValue;\r\n }\r\n\r\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\r\n  if (this.disabled || optionDisabled) return;\r\n  this.selectedValue = optionValue;\r\n  this.value = optionValue;\r\n  this.sdChange.emit(optionValue);\r\n };\r\n\r\n private isOptionSelected(option: RadioOption): boolean {\r\n  return this.selectedValue === option.value;\r\n }\r\n\r\n private isOptionDisabled(option: RadioOption): boolean {\r\n  return this.disabled || !!option.disabled;\r\n }\r\n\r\n private getRadioClasses(option: RadioOption): string {\r\n  const classes = [\r\n   'sd-radio-group__option',\r\n   this.isOptionSelected(option)\r\n    ? 'sd-radio-group__option--selected'\r\n    : 'sd-radio-group__option--unselected',\r\n  ];\r\n\r\n  if (this.isOptionDisabled(option)) {\r\n   classes.push('sd-radio-group__option--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGroupClasses(): string {\r\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n  return (\r\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\r\n    {this.radioOptions.map((option, index) => {\r\n     const isSelected = this.isOptionSelected(option);\r\n     const isDisabled = this.isOptionDisabled(option);\r\n\r\n     return (\r\n      <label\r\n       key={`radio-${index}`}\r\n       class={this.getRadioClasses(option)}\r\n       role=\"radio\"\r\n       aria-checked={isSelected.toString()}\r\n       aria-disabled={isDisabled.toString()}\r\n       aria-label={option.label || 'radio option'}\r\n      >\r\n       <input\r\n        type=\"radio\"\r\n        name={groupName}\r\n        value={option.value.toString()}\r\n        checked={isSelected}\r\n        disabled={isDisabled}\r\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\r\n       />\r\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\r\n      </label>\r\n     );\r\n    })}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: '70eafe63e44409063337d0a43846c3be869086df' }, h("div", { key: '21cafb06d87968387f9b9ec91fdd09643cded1ca', class: {
+        return (h(Host, { key: '7cf5b51057f8eb7ad7cf7143225bcd842e5fa231' }, h("div", { key: 'ab9e02db38a0717b9aeb85890b150a6e59a9f7ee', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '71bf4aa9bb298ddd42fa2df53ffcaa75acd17811', style: style }, h("div", { key: '9f0970babd424f097b82acab1e93d4922cd5a36e', class: {
+        return (h(Host, { key: '356e513b8d7e856ed22d5358027b163463d55c1d', style: style }, h("div", { key: '3a75650badea618ed89899de57fbd25c020df6d0', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '57d243584fdf590139ec3436c473d54daa477e36', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'e42235a132e3c13e9a996206ab7f58698ab97fe1', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '1fb3028e6869ec0d77878dd577ad9f4f711edc38', class: {
+        return (h("div", { key: '2d1e55e35c77246a2df6856b2e7053cc21aabfc5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '5d2f2564587c376d4708921e5eb68bc1d41039ab', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '0d4e839a0a091d47f0a07f8a248fbc71cf2b67a3', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '33ce9985f9c94502d103d81b3678abdb732dfadb', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '262ec7ac68b981b5a69c21a5785c2c4ff5db7966', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '6ff97d5a3c84e97a4712d98f04b4cf5a5fef1895', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '861bc3ff0ac64af5482783e7412f1ec706fe90e4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f9c89b082413da5914e166d53e1fd9bc269395ce', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'eaec735454f0b3c102397352d7863662fa933b24', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTbody {
     render() {
-        return (h(Host, { key: 'f981fe2f39d8d1f292f018fba5f6f28f6606fc12' }, h("slot", { key: 'ae556a0c16e782d1842fabc1cb54a495b88f1ce5' })));
+        return (h(Host, { key: 'aa5030bb9713c355685de66e15db8b702744c0bc' }, h("slot", { key: '2bfed556b78fc92f8f6b4c574f976a7f0a3c36a8' })));
     }
     static get is() { return "sd-tbody"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -5,11 +5,11 @@ export class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '3fe3f8f4ec5b068bda0edd22ebbc5c973ae75b15', role: "cell", class: {
+        return (h(Host, { key: '6459518995f28a8138b3f669876c90dd24e610c2', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: 'f94a99bafb7723389304e01f809b3003deda067c' })));
+            }, style: this.tdStyle }, h("slot", { key: 'bf51d35dee9adb6a88b29a6c51be9f73ae1ab3b5' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-th/sd-th.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTh {
     render() {
-        return (h(Host, { key: '59aee067627e3ac7c23ea5d9f9401c19a00203bd', role: "columnheader" }, h("slot", { key: 'ea015f9ebcdccd3e08aab46af4e2a8bcb46e4a3a' })));
+        return (h(Host, { key: 'a9adef2bdfd7dd0a52a55fffb40db6511db5747e', role: "columnheader" }, h("slot", { key: 'd4af30df5d6a4a9140a9d10e0f3948de088f8c18' })));
     }
     static get is() { return "sd-th"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-tr/sd-tr.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTr {
     render() {
-        return (h(Host, { key: '90de593581b21ca801462331e50126899946bf43', role: "row" }, h("slot", { key: '58eb2f9b52a36495afe40899d45bd6d1ba62b5d4' })));
+        return (h(Host, { key: '18a0e95b7264b495bd15aeb7c3a704dac938e140', role: "row" }, h("slot", { key: '83ac4ded200f5e7b18a01d2055859e1093e34d6c' })));
     }
     static get is() { return "sd-tr"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table-backup/sd-table-backup.css

@@ -53,7 +53,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: var(--table-width, 100%);
+  width: 100%;
   height: var(--table-container-height, 100%);
   min-height: var(--table-container-height, 100%);
   background: rgba(255, 255, 255, 0.6);

package/dist/collection/components/sd-table-backup/sd-table-backup.js

@@ -165,6 +165,12 @@ export class SdTable {
                     this.cachedContainerHeight = this.scrollContainer.clientHeight;
                     this.cachedContainerWidth = this.scrollContainer.clientWidth;
                     middle.addEventListener('scroll', this.onScroll, { passive: true });
+                    if (this.useVirtualScroll.vertical) {
+                        this.calculateVisibleRange();
+                    }
+                    if (this.useVirtualScroll.horizontal) {
+                        this.calculateVisibleColumnRange();
+                    }
                     this.onScroll();
                 }
             });
@@ -628,16 +634,16 @@ export class SdTable {
             }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Host, { key: '8c01d8c3b3428d0fccb37e337fd12412c7aee51a' }, h("div", { key: 'be41d64f4b9daaa1440f2a89e253ce487894758e', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: '85b4655b2ee298d535add2e43c2ef73b8c816716' }, h("div", { key: '9fc71a34045a725db9fa19fec9954d1edb90f1e4', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '580c4ca69d5374585eeacc756561e5caf2ea6e29', class: "sd-table__container", style: {
+            } }, h("div", { key: 'dcb78c1bac32c68bc5ac81beece5ee8ca74025ba', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: '2832a6e9078923daeefa28512450950abfca0aad', class: {
+            } }, h("div", { key: 'e0bb087930f0cf07c06c6f5684a5b26fa5e25a02', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '696cc35d6d3c58dabf92aa49dbff9a7034a0ed64', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '8cbd272006b64c4a6e10c87c58313a0792358451' }))), h("table", { key: 'de78dba38361cfebe39f8c3cddb57a1c93861ff6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: '662407b29c2ea446d96553dd548bec11e8179185', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '3a475142c5da9cc40f92b761923415893a1366fa', class: "sd-table__no-data" }, h("slot", { key: '49e90e85516b6656c7019b4b33a50f6b36d949a8', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '460a669cb3841fdc7745e4acb774729910890b42', class: "sd-table__pagination" }, h("sd-pagination", { key: '971f5e41f8df09f4455cdf41f969e5f47d2aac99', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ed37b8efc95ae51bf4c903a5c7c5a068ec9bfcca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '4f36b5fc670aa98774e565b000cc1623a6cae0af', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '2e794ac56824bfad1f9f42482b75498e7f2ca70c' }))), h("table", { key: 'a4017ae90c8f932c22b26d7f81c9fc13785e52d0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: 'c7b008d66c47442d25a977d76b7b6dd266d7f008', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '20235f4747c2396710b44d46ea1da659156bb9ca', class: "sd-table__no-data" }, h("slot", { key: '432a8669c4942eb92c4bce7f0b08cb9cb1f9f6e3', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f9f6dc05c1004b03e10ece4c091d67ca564b1633', class: "sd-table__pagination" }, h("sd-pagination", { key: 'd7efd361091fe9725e8c79289501506a779e1111', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '401d35d85c2fc78094c267f27d74055108179f9e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table-backup"; }
     static get originalStyleUrls() {