@sellmate/design-system 0.0.30 → 0.0.31

package/dist/cjs/design-system.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["sd-select-multiple.cjs",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group.cjs",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker.cjs",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker.cjs",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover.cjs",[[769,"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"]}]]],["sd-badge.cjs",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card.cjs",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-tag.cjs",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-date-box.cjs",[[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]}]]],["sd-button_13.cjs",[[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],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[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],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[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],"isDisabled":[64]}],[769,"sd-tooltip-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-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[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"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group.cjs",[[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]}]]]], options);
+  return index.bootstrapLazy([["sd-select-multiple.cjs",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group.cjs",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker.cjs",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker.cjs",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover.cjs",[[769,"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"]}]]],["sd-badge.cjs",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card.cjs",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress.cjs",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag.cjs",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-button_13.cjs",[[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],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[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],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[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],"isDisabled":[64]}],[769,"sd-tooltip-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-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[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"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group.cjs",[[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]}]]],["sd-date-box.cjs",[[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]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-DXo1Fhkn.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["sd-select-multiple.cjs",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group.cjs",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker.cjs",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker.cjs",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover.cjs",[[769,"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"]}]]],["sd-badge.cjs",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card.cjs",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-tag.cjs",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-date-box.cjs",[[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]}]]],["sd-button_13.cjs",[[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],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[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],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[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],"isDisabled":[64]}],[769,"sd-tooltip-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-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[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"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group.cjs",[[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]}]]]], options);
+  return index.bootstrapLazy([["sd-select-multiple.cjs",[[772,"sd-select-multiple",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group.cjs",[[772,"sd-select-multiple-group",{"value":[1040],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"useCheckbox":[4,"use-checkbox"],"containerStyle":[16],"triggerStyle":[16],"dropdownStyle":[16],"optionStyle":[16],"labelStyle":[16],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker.cjs",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker.cjs",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover.cjs",[[769,"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"]}]]],["sd-badge.cjs",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card.cjs",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress.cjs",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag.cjs",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-button_13.cjs",[[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],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[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],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[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],"isDisabled":[64]}],[769,"sd-tooltip-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-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[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"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group.cjs",[[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]}]]],["sd-date-box.cjs",[[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]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/sd-button_13.cjs.entry.js

@@ -1393,7 +1393,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: 'f627f75ea5e3765390729eac31e02e78ca084e95' }, index.h("div", { key: 'ce5f8aa53fb8ae3a3b165c5778aa352a99d0ddf8', class: {
+        return (index.h(index.Host, { key: '57acf795fbb642249d9716fc8fa4123f2d939d2b' }, index.h("div", { key: '6653deafa3142a3bf9b67290dae411c29fc38f41', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -1722,20 +1722,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: '2a4473864df0253d22d03a7b1512d6261d2c5f1e' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: '48ba8d56f7ee68ac71bd7076c98f8e7081635de5', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: 'edb64ac6facd530f02a3c663a4d7e728270bb914', class: {
+        return (index.h(index.Fragment, { key: '45dbef1d93b082f8fe42c003f997aa80ad297ee5' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: '7357fe6678832a74c567b24e404d14d75a77b13f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '3add41a611cb55fddaae7733b6db9ec996561723', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, index.h("i", { key: '2907f18d268eed0d0e70707b1fb113ca1b6ce1a6', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'fd6417e7cad6464f5830accca7842f9c2d5431ca', class: {
+            } }, index.h("i", { key: 'f62cfc386831412cb958da88a41e0487be40d119', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'daab1b1028832d95fb05456b96981cdeb1e31c4e', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), index.h("div", { key: '30e7d57e6bdd47ca5da01c8e94e6d29cc174de58', class: "sd-tooltip-menu__content", ref: el => {
+            } })), index.h("div", { key: 'ab7ca38aa68cf8279ff0d372651a4e26b217781c', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && index.h("span", { key: '9e6afb40c06db772ed94fd90c73713a1134e2866' }, this.el.textContent)), this.useClose && (index.h("div", { key: '8679d07e7d2e027f4a96ebaecd64b1fac9ecf503', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'aa018b14eeeb08f872af25d93c0bd36708bf36e8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '0a0d3c6c246adccdb9b31502f13a1189a0a94554', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && index.h("span", { key: 'f5768e8b7e3033f64797aba77a504d57236e51e3' }, this.el.textContent)), this.useClose && (index.h("div", { key: '94bdf692fabf190912a64d6051957031b2964ae5', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: '8826745fb1dab139358bc0d430d622abca333e5e', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '863f114251ec302425224a7385dd23292f7f6340', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;
@@ -1888,7 +1888,7 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return index.h("slot", { key: '094d59498ba589963103957db54a7eae9e9771c4' });
+        return index.h("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
     }
 };
 

package/dist/cjs/sd-progress.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-DXo1Fhkn.js');
+
+const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:4px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
+
+const SdProgress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    type = 'bar';
+    status = 'default';
+    percentage = 0;
+    size = 80;
+    strokeWidth = 12;
+    label;
+    statusColor = {
+        default: '#aaaaaa',
+        progress: '#0075ff',
+        complete: '#12B553',
+        error: '#FB4444',
+    };
+    render() {
+        return (index.h(index.Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
+                '--progress-color': this.statusColor[this.status],
+                '--progress-percentage': `${this.percentage}%`,
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
+    }
+    renderBarProgress() {
+        return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, index.h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
+    }
+    renderSpinnerProgress() {
+        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
+        const circumference = 2 * Math.PI * radius; // 원의 둘레
+        const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset
+        const progressBgSize = `${this.size}px`;
+        const progressSize = `${this.size / 2}px`;
+        return (index.h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, index.h("svg", { width: progressBgSize, height: progressBgSize }, index.h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), index.h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), index.h("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
+    }
+};
+SdProgress.style = sdProgressCss;
+
+exports.sd_progress = SdProgress;
+//# sourceMappingURL=sd-progress.entry.cjs.js.map

package/dist/cjs/sd-progress.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.entry.cjs.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\n\nsd-progress {\n display: block;\n\n .sd-progress__bar {\n  position: relative;\n  width: 360px;\n  height: 20px;\n  overflow: hidden;\n  border-radius: 4px;\n  background-color: $grey_20;\n  text-align: center;\n\n  &__percent {\n   width: var(--progress-percentage);\n   height: 100%;\n   border-radius: 4px;\n   background-color: var(--progress-color, $brilliantblue_75);\n   transition: all 0.5s;\n   &.proceed {\n    border-top-right-radius: 50%;\n   }\n  }\n  &__indicator {\n   position: absolute;\n   left: 0;\n   top: 0;\n   height: 20px;\n   width: 100%;\n   background-color: $grey_20;\n   line-height: 21px;\n   z-index: 1;\n  }\n\n  &__indicator--left {\n   color: var(--progress-color, $brilliantblue_75);\n   clip-path: inset(0 0 0 var(--progress-percentage));\n  }\n\n  &__indicator--right {\n   color: white;\n   background-color: var(--progress-color, $brilliantblue_75);\n   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\n  }\n }\n\n .sd-progress__spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  svg {\n   transform: rotate(-90deg);\n  }\n\n  &__label {\n   margin-top: 4px;\n   font-size: 16px;\n   color: var(--progress-color, $brilliantblue_75);\n  }\n }\n\n .sd-progress__label {\n  margin-top: 4px;\n  font-size: 12px;\n  color: $grey_95;\n  text-align: center;\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-progress',\n styleUrl: 'sd-progress.scss',\n})\nexport class SdProgress {\n @Prop() type: 'bar' | 'spinner' = 'bar';\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\n @Prop() percentage: number = 0;\n @Prop() size: number = 80;\n @Prop() strokeWidth: number = 12;\n @Prop() label?: string;\n\n private statusColor = {\n  default: '#aaaaaa',\n  progress: '#0075ff',\n  complete: '#12B553',\n  error: '#FB4444',\n };\n\n render() {\n  return (\n   <Host\n    style={{\n     '--progress-color': this.statusColor[this.status],\n     '--progress-percentage': `${this.percentage}%`,\n    }}\n   >\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\n   </Host>\n  );\n }\n\n renderBarProgress() {\n  return (\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\n    <div\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\n    ></div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\n     {this.percentage}%\n    </div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\n     {this.percentage}%\n    </div>\n   </div>\n  );\n }\n\n renderSpinnerProgress() {\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\n  const progressBgSize = `${this.size}px`;\n  const progressSize = `${this.size / 2}px`;\n\n  return (\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\n    <svg width={progressBgSize} height={progressBgSize}>\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke=\"#EEEEEE\"\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n     />\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke={this.statusColor[this.status]}\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n      stroke-dasharray={circumference}\n      stroke-dashoffset={offset}\n      stroke-linecap=\"round\"\n      class=\"transition-all duration-500\"\n     />\n    </svg>\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\n   </div>\n  );\n }\n}\n\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\n// <script>\n//  document.addEventListener('DOMContentLoaded', event => {\n//   progress = document.getElementById('sd-progress-1');\n//   progress2 = document.getElementById('sd-progress-2');\n//   progress3 = document.getElementById('sd-progress-3');\n//   progress2.label = 'test label...';\n//   progress3.percentage = 50;\n//   progress3.status = 'error';\n//   let percentage = 0;\n//   const interval = setInterval(() => {\n//    if (percentage >= 100) {\n//     clearInterval(interval);\n//     progress.status = 'complete';\n//     progress2.status = 'complete';\n//     return;\n//    }\n//    percentage += 10;\n//    progress.status = 'progress';\n//    progress.percentage = percentage;\n//    progress2.status = 'progress';\n//    progress2.percentage = percentage;\n//   }, 500);\n//  });\n// </script>\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -215,11 +215,11 @@ const SdSelectMultiple = class extends selectKeyboardNavigation.BaseDropdownEven
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (index.h(index.Host, { key: '8f2df6c0a3b6e8d2300a77bd84b993101824cae1', style: style }, index.h("div", { key: '9587ca5bb88d7767b5f48344063deef220964027', class: {
+        return (index.h(index.Host, { key: 'c569bb885003048b6ec22bfb0688c671a70a27d5', style: style }, index.h("div", { key: '94b43199502f44f7d663981c320696c6e8cf968f', 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), index.h("div", { key: 'f00fa7d7c2cbc6f751cc89411b1d77037a950e3e', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: 'd4fd6929b78add118c01d7b52c1c1e0be9867924', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/cjs/sd-select-option-group.cjs.entry.js

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '6365bd1ae57487d7bbccf25637770aedecc2bc6c', class: {
+        return (index.h("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 '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) }, index.h("div", { key: 'b48606dad43a722f434df8b384e3c92332d59f94', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '2c564c5480482ade27ebb0cb066cc3c971d1f8f2', 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) }, index.h("div", { key: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '2175b4ec10bf631a419f5cfa439e0c24f6ccf5a7', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'bbb57f2a8c00e2bb56a4f6a5b68cb5d09d81d9c7', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss;

package/dist/collection/collection-manifest.json

@@ -18,6 +18,7 @@
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",
     "components/sd-portal/sd-portal.js",
+    "components/sd-progress/sd-progress.js",
     "components/sd-select/sd-select-option/sd-select-option.js",
     "components/sd-select-multiple/sd-select-multiple.js",
     "components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js",

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

@@ -0,0 +1,61 @@
+sd-progress {
+  display: block;
+}
+sd-progress .sd-progress__bar {
+  position: relative;
+  width: 360px;
+  height: 20px;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: #eeeeee;
+  text-align: center;
+}
+sd-progress .sd-progress__bar__percent {
+  width: var(--progress-percentage);
+  height: 100%;
+  border-radius: 4px;
+  background-color: var(--progress-color, #0075ff);
+  transition: all 0.5s;
+}
+sd-progress .sd-progress__bar__percent.proceed {
+  border-top-right-radius: 50%;
+}
+sd-progress .sd-progress__bar__indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 20px;
+  width: 100%;
+  background-color: #eeeeee;
+  line-height: 21px;
+  z-index: 1;
+}
+sd-progress .sd-progress__bar__indicator--left {
+  color: var(--progress-color, #0075ff);
+  clip-path: inset(0 0 0 var(--progress-percentage));
+}
+sd-progress .sd-progress__bar__indicator--right {
+  color: white;
+  background-color: var(--progress-color, #0075ff);
+  clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);
+}
+sd-progress .sd-progress__spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+sd-progress .sd-progress__spinner svg {
+  transform: rotate(-90deg);
+}
+sd-progress .sd-progress__spinner__label {
+  margin-top: 4px;
+  font-size: 16px;
+  color: var(--progress-color, #0075ff);
+}
+sd-progress .sd-progress__label {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #222222;
+  text-align: center;
+}

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

@@ -0,0 +1,194 @@
+import { Host, h } from "@stencil/core";
+export class SdProgress {
+    type = 'bar';
+    status = 'default';
+    percentage = 0;
+    size = 80;
+    strokeWidth = 12;
+    label;
+    statusColor = {
+        default: '#aaaaaa',
+        progress: '#0075ff',
+        complete: '#12B553',
+        error: '#FB4444',
+    };
+    render() {
+        return (h(Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
+                '--progress-color': this.statusColor[this.status],
+                '--progress-percentage': `${this.percentage}%`,
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
+    }
+    renderBarProgress() {
+        return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
+    }
+    renderSpinnerProgress() {
+        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
+        const circumference = 2 * Math.PI * radius; // 원의 둘레
+        const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset
+        const progressBgSize = `${this.size}px`;
+        const progressSize = `${this.size / 2}px`;
+        return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
+    }
+    static get is() { return "sd-progress"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bar' | 'spinner'",
+                    "resolved": "\"bar\" | \"spinner\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'bar'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'progress' | 'complete' | 'error'",
+                    "resolved": "\"complete\" | \"default\" | \"error\" | \"progress\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "percentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "percentage",
+                "defaultValue": "0"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "80"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "12"
+            },
+            "label": {
+                "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": "label"
+            }
+        };
+    }
+}
+//  <sd-progress id="sd-progress-1"></sd-progress>
+//  <sd-progress id="sd-progress-2" type="spinner"></sd-progress>
+//  <sd-progress id="sd-progress-3" type="spinner"></sd-progress>
+// <script>
+//  document.addEventListener('DOMContentLoaded', event => {
+//   progress = document.getElementById('sd-progress-1');
+//   progress2 = document.getElementById('sd-progress-2');
+//   progress3 = document.getElementById('sd-progress-3');
+//   progress2.label = 'test label...';
+//   progress3.percentage = 50;
+//   progress3.status = 'error';
+//   let percentage = 0;
+//   const interval = setInterval(() => {
+//    if (percentage >= 100) {
+//     clearInterval(interval);
+//     progress.status = 'complete';
+//     progress2.status = 'complete';
+//     return;
+//    }
+//    percentage += 10;
+//    progress.status = 'progress';
+//    progress.percentage = percentage;
+//    progress2.status = 'progress';
+//    progress2.percentage = percentage;
+//   }, 500);
+//  });
+// </script>
+//# sourceMappingURL=sd-progress.js.map

package/dist/collection/components/sd-progress/sd-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.js","sourceRoot":"","sources":["../../../src/components/sd-progress/sd-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-progress',\n styleUrl: 'sd-progress.scss',\n})\nexport class SdProgress {\n @Prop() type: 'bar' | 'spinner' = 'bar';\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\n @Prop() percentage: number = 0;\n @Prop() size: number = 80;\n @Prop() strokeWidth: number = 12;\n @Prop() label?: string;\n\n private statusColor = {\n  default: '#aaaaaa',\n  progress: '#0075ff',\n  complete: '#12B553',\n  error: '#FB4444',\n };\n\n render() {\n  return (\n   <Host\n    style={{\n     '--progress-color': this.statusColor[this.status],\n     '--progress-percentage': `${this.percentage}%`,\n    }}\n   >\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\n   </Host>\n  );\n }\n\n renderBarProgress() {\n  return (\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\n    <div\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\n    ></div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\n     {this.percentage}%\n    </div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\n     {this.percentage}%\n    </div>\n   </div>\n  );\n }\n\n renderSpinnerProgress() {\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\n  const progressBgSize = `${this.size}px`;\n  const progressSize = `${this.size / 2}px`;\n\n  return (\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\n    <svg width={progressBgSize} height={progressBgSize}>\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke=\"#EEEEEE\"\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n     />\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke={this.statusColor[this.status]}\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n      stroke-dasharray={circumference}\n      stroke-dashoffset={offset}\n      stroke-linecap=\"round\"\n      class=\"transition-all duration-500\"\n     />\n    </svg>\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\n   </div>\n  );\n }\n}\n\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\n// <script>\n//  document.addEventListener('DOMContentLoaded', event => {\n//   progress = document.getElementById('sd-progress-1');\n//   progress2 = document.getElementById('sd-progress-2');\n//   progress3 = document.getElementById('sd-progress-3');\n//   progress2.label = 'test label...';\n//   progress3.percentage = 50;\n//   progress3.status = 'error';\n//   let percentage = 0;\n//   const interval = setInterval(() => {\n//    if (percentage >= 100) {\n//     clearInterval(interval);\n//     progress.status = 'complete';\n//     progress2.status = 'complete';\n//     return;\n//    }\n//    percentage += 10;\n//    progress.status = 'progress';\n//    progress.percentage = percentage;\n//    progress2.status = 'progress';\n//    progress2.percentage = percentage;\n//   }, 500);\n//  });\n// </script>\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: 'f627f75ea5e3765390729eac31e02e78ca084e95' }, h("div", { key: 'ce5f8aa53fb8ae3a3b165c5778aa352a99d0ddf8', class: {
+        return (h(Host, { key: '57acf795fbb642249d9716fc8fa4123f2d939d2b' }, h("div", { key: '6653deafa3142a3bf9b67290dae411c29fc38f41', 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: '8f2df6c0a3b6e8d2300a77bd84b993101824cae1', style: style }, h("div", { key: '9587ca5bb88d7767b5f48344063deef220964027', class: {
+        return (h(Host, { key: 'c569bb885003048b6ec22bfb0688c671a70a27d5', style: style }, h("div", { key: '94b43199502f44f7d663981c320696c6e8cf968f', 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: 'f00fa7d7c2cbc6f751cc89411b1d77037a950e3e', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'd4fd6929b78add118c01d7b52c1c1e0be9867924', 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: '6365bd1ae57487d7bbccf25637770aedecc2bc6c', class: {
+        return (h("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', 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: 'b48606dad43a722f434df8b384e3c92332d59f94', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '2c564c5480482ade27ebb0cb066cc3c971d1f8f2', 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: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '2175b4ec10bf631a419f5cfa439e0c24f6ccf5a7', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'bbb57f2a8c00e2bb56a4f6a5b68cb5d09d81d9c7', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {