npm - @sellmate/design-system - Versions diffs - 0.0.52 → 0.0.53 - Mend

@sellmate/design-system 0.0.52 → 0.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (354) hide show

package/dist/components/sd-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-table.js","mappings":"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","names":["SdTable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import 'variables.scss';\r\n@import 'extend.scss';\r\n\r\n.sd-table__wrapper {\r\n height: var(--table-height, auto);\r\n width: var(--table-width, 100%);\r\n color: $grey_95;\r\n\r\n .sd-table__container {\r\n width: 100%;\r\n height: auto;\r\n border: 1px solid $grey_30;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n overflow: hidden;\r\n\r\n .sd-table__middle {\r\n overflow: auto;\r\n will-change: scroll-position;\r\n height: var(--table-height, auto);\r\n @extend %scrollBar;\r\n\r\n .sd-table {\r\n background-color: white;\r\n display: table;\r\n width: 100%;\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n table-layout: fixed;\r\n position: relative;\r\n\r\n &--selectable {\r\n td.sd-td--selected,\r\n th.sd-th--selected {\r\n width: 52px !important;\r\n max-width: 52px !important;\r\n min-width: 52px !important;\r\n padding: 0 10px 0 24px;\r\n text-align: left;\r\n }\r\n }\r\n\r\n &--sticky-header {\r\n thead {\r\n position: sticky;\r\n top: 0;\r\n z-index: 120;\r\n }\r\n }\r\n\r\n &--sticky-column {\r\n th.sticky-left,\r\n th.sticky-right {\r\n position: sticky;\r\n background-color: $th-bg;\r\n z-index: 110 !important;\r\n }\r\n td.sticky-left,\r\n td.sticky-right {\r\n position: sticky;\r\n background-color: white;\r\n z-index: 100 !important;\r\n }\r\n\r\n .sticky-left {\r\n left: var(--sticky-left-offset, 0);\r\n }\r\n .sticky-right {\r\n right: var(--sticky-right-offset, 0);\r\n }\r\n\r\n th.sticky-cell {\r\n position: sticky;\r\n z-index: 102;\r\n background-color: $th-bg;\r\n }\r\n td.sticky-cell {\r\n position: sticky;\r\n z-index: 101;\r\n background-color: white;\r\n }\r\n }\r\n\r\n &--scrolled-left {\r\n th.sticky-left-edge,\r\n td.sticky-left-edge {\r\n overflow: visible;\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n right: -20px;\r\n width: 20px;\r\n height: 100%;\r\n z-index: 101 !important;\r\n box-shadow: inset 12px 0 20px -25px;\r\n opacity: 1;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &--scrolled-right {\r\n th.sticky-right-edge,\r\n td.sticky-right-edge {\r\n overflow: visible;\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -20px;\r\n width: 20px;\r\n height: 100%;\r\n z-index: 101 !important;\r\n box-shadow: inset -12px 0 20px -25px;\r\n opacity: 1;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &--no-data {\r\n thead {\r\n opacity: 0.4;\r\n tr {\r\n th {\r\n &.sd-th {\r\n border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n sd-td,\r\n sd-th,\r\n .sd-th__content--label {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n word-break: keep-all;\r\n }\r\n\r\n thead {\r\n height: 36px;\r\n\r\n sd-tr {\r\n width: 100%;\r\n\r\n sd-th {\r\n background: $th-bg;\r\n height: 36px;\r\n padding: 0 16px;\r\n font-weight: 500;\r\n vertical-align: middle;\r\n border-bottom: 1px solid $grey_30;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n position: relative;\r\n\r\n &.sd-th {\r\n .sd-th__content {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 4px;\r\n\r\n &--left {\r\n justify-content: flex-start;\r\n }\r\n &--center {\r\n justify-content: center;\r\n }\r\n &--right {\r\n justify-content: flex-end;\r\n }\r\n }\r\n\r\n .sd-th__resizer {\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n transform: translateY(-50%);\r\n width: 4px;\r\n height: 16px;\r\n cursor: col-resize;\r\n z-index: 3;\r\n border-left: 1px solid $grey_45;\r\n border-right: 1px solid $grey_45;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n sd-tbody {\r\n .sd-table__loading {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: calc(var(--table-height, auto) - 36px);\r\n min-height: calc(100% - 36px);\r\n background: rgba(255, 255, 255, 0.6);\r\n z-index: 200;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n sd-tr {\r\n &:last-of-type {\r\n sd-td {\r\n border-bottom: none;\r\n }\r\n }\r\n sd-td {\r\n height: 44px;\r\n padding: 0 16px;\r\n border-bottom: 1px solid $grey_30;\r\n background: white;\r\n vertical-align: middle;\r\n\r\n &.sd-td {\r\n &--left {\r\n text-align: left;\r\n }\r\n &--center {\r\n text-align: center;\r\n }\r\n &--right {\r\n text-align: right;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .sd-table__bottom {\r\n background: white;\r\n text-align: center;\r\n }\r\n }\r\n\r\n .sd-table__pagination {\r\n position: relative;\r\n background: $grey_05;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid $grey_30;\r\n border-top: none;\r\n border-radius: 8px;\r\n\r\n sd-select {\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n\r\n .sd-select {\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n Watch,\r\n h,\r\n EventEmitter,\r\n Host,\r\n} from '@stencil/core';\r\nimport { CheckedType } from '../sd-checkbox/sd-checkbox';\r\nimport { SelectOption } from '../sd-select/sd-select';\r\nimport { SdSelectCustomEvent } from '../../components';\r\n\r\nexport type SdTableSortDir = 'asc' \| 'desc' \| 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string \| ((row: any) => any);\r\n align?: 'left' \| 'center' \| 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: Record<string, any>;\r\n tdClass?: string;\r\n thClass?: string;\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns!: SdTableColumn[];\r\n @Prop({ mutable: true }) rows!: Row[];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() width?: string;\r\n @Prop() height?: string;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() stickyColumn: { left?: number; right?: number } = { left: 0, right: 0 };\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() isLoading: boolean = false;\r\n @Prop() pagination?: {\r\n page: number;\r\n rowsPerPage: number;\r\n lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n column: SdTableColumn,\r\n row: Row,\r\n ) => HTMLElement \| string \| null \| undefined;\r\n @Prop() useInternalPagination: boolean = false;\r\n @Prop() useRowsPerPageSelect: boolean = false;\r\n @Prop() rowsPerPageOption: SelectOption[] = [\r\n { label: '10개씩 보기', value: 10 },\r\n { label: '25개씩 보기', value: 25 },\r\n { label: '50개씩 보기', value: 50 },\r\n { label: '100개씩 보기', value: 100 },\r\n ];\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n @Event() sdRowsPerPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page \|\| 1;\r\n @State() innerRows: Row[] = [];\r\n @State() innerSelected: Set<Row> = new Set();\r\n @State() columnWidths: number[] = [];\r\n @State() scrolledLeft: boolean = false;\r\n @State() scrolledRight: boolean = false;\r\n\r\n @Watch('columns')\r\n handleColumnsChange(newCols: SdTableColumn[]) {\r\n this.columnWidths = newCols.map(c => parseInt(c.width \|\| '120', 10));\r\n }\r\n\r\n @Watch('rows')\r\n handleRowsChange(newRows: Row[]) {\r\n this.innerRows = [...newRows];\r\n }\r\n\r\n @Watch('selected')\r\n handleSelectedChange(newSelected: Set<Row>) {\r\n this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n handlePaginationChange(\r\n newVal?: { page: number; rowsPerPage: number; lastPage?: number } \| undefined,\r\n ) {\r\n if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n this.innerRows = [...(this.rows \|\| [])];\r\n this.innerSelected = new Set(this.selected);\r\n this.columnWidths = (this.columns \|\| []).map(c => parseInt(c.width \|\| '120', 10));\r\n }\r\n\r\n componentDidLoad() {\r\n // SSR 환경 체크\r\n if (typeof window === 'undefined') return;\r\n\r\n const middle = this.el.querySelector('.sd-table__middle');\r\n if (!middle) return;\r\n\r\n const onScroll = () => {\r\n const { scrollLeft, scrollWidth, clientWidth } = middle as HTMLElement;\r\n this.scrolledLeft = scrollLeft > 0;\r\n this.scrolledRight = scrollLeft + clientWidth < scrollWidth;\r\n };\r\n middle.addEventListener('scroll', onScroll, { passive: true });\r\n onScroll();\r\n }\r\n\r\n // ----- Derived getters -----\r\n private get visibleColumns(): SdTableColumn[] {\r\n return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private get paginatedRows(): Row[] {\r\n if (!this.pagination \|\| !this.useInternalPagination) return this.innerRows;\r\n\r\n const { rowsPerPage = this.rows.length } = this.pagination \|\| {};\r\n\r\n const result = this.innerRows.slice(\r\n (this.currentPage - 1) * rowsPerPage,\r\n this.currentPage * rowsPerPage,\r\n );\r\n\r\n return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n const { lastPage, rowsPerPage = this.rows.length } = this.pagination \|\| {};\r\n\r\n return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n return [\r\n 'sd-table',\r\n this.stickyHeader && 'sd-table--sticky-header',\r\n this.selectable && 'sd-table--selectable',\r\n this.resizable && 'sd-table--resizable',\r\n !this.innerRows.length && 'sd-table--no-data',\r\n ((this.stickyColumn?.left ?? 0) > 0 \|\| (this.stickyColumn?.right ?? 0) > 0) &&\r\n 'sd-table--sticky-column',\r\n this.scrolledLeft && 'sd-table--scrolled-left',\r\n this.scrolledRight && 'sd-table--scrolled-right',\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n }\r\n\r\n // ----- Selection -----\r\n // private isRowSelected(row: Row): boolean {\r\n // return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);\r\n // }\r\n\r\n // private updateRowSelect(row: Row) {\r\n // const selectedArray = Array.from(this.innerSelected);\r\n // const exists = this.isRowSelected(row);\r\n // const newSelected = exists\r\n // ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n // : [...selectedArray, row];\r\n\r\n // // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n // if (newSelected.length === selectedArray.length) return;\r\n\r\n // this.innerSelected = new Set(newSelected);\r\n // this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n // }\r\n\r\n private toggleSelectAll(checked: CheckedType) {\r\n if (checked) {\r\n const pageRows = new Set([...this.paginatedRows]);\r\n this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n } else {\r\n const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n this.innerSelected = new Set(\r\n [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n );\r\n }\r\n\r\n this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean \| null {\r\n const total = this.paginatedRows.length;\r\n const selectedCount = this.paginatedRows.filter(row =>\r\n Array.from(this.innerSelected).some(\r\n selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n ),\r\n ).length;\r\n\r\n if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n if (selectedCount === total) return true; // 전부 선택됨\r\n return null; // 일부만 선택됨\r\n }\r\n\r\n // ----- Helpers -----\r\n private getStickyStyle(colIdx: number) {\r\n const leftOffset =\r\n this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);\r\n const rightOffset = this.columnWidths\r\n .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right \|\| 0) && i > colIdx)\r\n .reduce((a, b) => a + b, 0);\r\n return {\r\n '--sticky-left-offset': `${leftOffset}px`,\r\n '--sticky-right-offset': `${rightOffset}px`,\r\n 'width': `${this.columnWidths[colIdx]}px`,\r\n 'minWidth': `${this.columnWidths[colIdx]}px`,\r\n 'maxWidth': `${this.columnWidths[colIdx]}px`,\r\n };\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n // SSR 환경 체크\r\n if (typeof document === 'undefined') return;\r\n\r\n const startX = event.clientX;\r\n const startWidth = this.columnWidths[index];\r\n\r\n const handleMouseMove = (moveEvent: MouseEvent) => {\r\n const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n };\r\n\r\n const handleMouseUp = () => {\r\n document.removeEventListener('mousemove', handleMouseMove);\r\n document.removeEventListener('mouseup', handleMouseUp);\r\n };\r\n\r\n document.addEventListener('mousemove', handleMouseMove);\r\n document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n // private getCellValue(column: SdTableColumn, row: Row) {\r\n // const { field, format, name } = column;\r\n // const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];\r\n // return format ? format(value, row) : value;\r\n // }\r\n\r\n // ----- Render -----\r\n private renderHeader() {\r\n return (\r\n <thead>\r\n <sd-tr>\r\n {this.selectable && (\r\n <sd-th\r\n class={{\r\n 'sd-th': true,\r\n 'sd-th--selected': true,\r\n 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),\r\n }}\r\n style={{\r\n '--sticky-left-offset': '0px',\r\n }}\r\n >\r\n <sd-checkbox\r\n checked={this.isAllChecked}\r\n disabled={!this.paginatedRows.length}\r\n onSdChange={(e: CustomEvent<CheckedType>) => this.toggleSelectAll(e.detail)}\r\n ></sd-checkbox>\r\n </sd-th>\r\n )}\r\n {this.visibleColumns.map((col, colIdx) => (\r\n <sd-th\r\n key={col.name}\r\n class={{\r\n 'sd-th': true,\r\n [`${col.thClass}`]: Boolean(col.thClass),\r\n 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n 'sticky-right': Boolean(\r\n this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n ),\r\n 'sticky-left-edge': Boolean(\r\n this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n ),\r\n 'sticky-right-edge': Boolean(\r\n this.stickyColumn.right &&\r\n colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n ),\r\n }}\r\n style={this.getStickyStyle(colIdx)}\r\n >\r\n <div class={`sd-th__content sd-th__content--${col.align \|\| 'left'}`}>\r\n <slot name={`header-cell-${col.name}`}>\r\n <div class=\"sd-th__content--label\">{col.label}</div>\r\n </slot>\r\n\r\n {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n {col.tooltip && (\r\n <sd-tooltip {...col.tooltipOptions}>\r\n <div slot=\"content\">\r\n {col.tooltip.map(text => (\r\n <p>{text}</p>\r\n ))}\r\n </div>\r\n </sd-tooltip>\r\n )}\r\n </div>\r\n\r\n {this.resizable && typeof window !== 'undefined' && (\r\n <div\r\n class=\"sd-th__resizer\"\r\n onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n ></div>\r\n )}\r\n </sd-th>\r\n ))}\r\n </sd-tr>\r\n </thead>\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class=\"sd-table__wrapper\"\r\n style={{\r\n '--table-width': this.width,\r\n '--table-height': this.height,\r\n }}\r\n >\r\n <div class=\"sd-table__container\">\r\n <div class=\"sd-table__middle\" role=\"table\">\r\n <div part=\"table\" class={this.sdTableClasses}>\r\n {this.renderHeader()}\r\n <sd-tbody>\r\n <slot></slot>\r\n </sd-tbody>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sd-table__bottom\"></div>\r\n </div>\r\n {this.pagination && this.innerRows.length > 0 && (\r\n <div class=\"sd-table__pagination\">\r\n <sd-pagination\r\n currentPage={!this.useInternalPagination ? this.pagination.page : this.currentPage}\r\n lastPage={!this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber}\r\n onPageChange={(e: CustomEvent<number>) => {\r\n if (!this.useInternalPagination) {\r\n this.sdPageChange.emit(e.detail);\r\n } else {\r\n this.currentPage = e.detail;\r\n this.sdPageChange.emit(this.currentPage);\r\n }\r\n }}\r\n ></sd-pagination>\r\n\r\n {this.useRowsPerPageSelect && (\r\n <sd-select\r\n value={this.pagination.rowsPerPage}\r\n options={this.rowsPerPageOption}\r\n width=\"128px\"\r\n onSdChange={(e: SdSelectCustomEvent<{ value: string \| number \| null }>) => {\r\n const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;\r\n if (!this.useInternalPagination) {\r\n this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n } else {\r\n const newRowsPerPage = Number(e.detail.value \|\| 0);\r\n let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));\r\n let newCurrentPage = this.currentPage;\r\n\r\n if (newCurrentPage > newLastPage) {\r\n newCurrentPage = newLastPage;\r\n }\r\n\r\n this.pagination = {\r\n page: newCurrentPage,\r\n rowsPerPage: newRowsPerPage,\r\n lastPage: newLastPage,\r\n };\r\n this.currentPage = newCurrentPage;\r\n this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n }\r\n }}\r\n ></sd-select>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"sd-table.js","mappings":"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","names":["SdTable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import 'variables.scss';\r\n@import 'extend.scss';\r\n\r\n.sd-table__wrapper {\r\n height: var(--table-height, auto);\r\n width: var(--table-width, 100%);\r\n color: $grey_95;\r\n\r\n .sd-table__container {\r\n width: 100%;\r\n height: auto;\r\n border: 1px solid $grey_30;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n overflow: hidden;\r\n\r\n .sd-table__middle {\r\n overflow: auto;\r\n will-change: scroll-position;\r\n height: var(--table-height, auto);\r\n @extend %scrollBar;\r\n\r\n .sd-table {\r\n background-color: white;\r\n display: table;\r\n width: 100%;\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n table-layout: fixed;\r\n position: relative;\r\n\r\n &--selectable {\r\n td.sd-td--selected,\r\n th.sd-th--selected {\r\n width: 52px !important;\r\n max-width: 52px !important;\r\n min-width: 52px !important;\r\n padding: 0 10px 0 24px;\r\n text-align: left;\r\n }\r\n }\r\n\r\n &--sticky-header {\r\n thead {\r\n position: sticky;\r\n top: 0;\r\n z-index: 120;\r\n }\r\n }\r\n\r\n &--sticky-column {\r\n th.sticky-left,\r\n th.sticky-right {\r\n position: sticky;\r\n background-color: $th-bg;\r\n z-index: 110 !important;\r\n }\r\n td.sticky-left,\r\n td.sticky-right {\r\n position: sticky;\r\n background-color: white;\r\n z-index: 100 !important;\r\n }\r\n\r\n .sticky-left {\r\n left: var(--sticky-left-offset, 0);\r\n }\r\n .sticky-right {\r\n right: var(--sticky-right-offset, 0);\r\n }\r\n\r\n th.sticky-cell {\r\n position: sticky;\r\n z-index: 102;\r\n background-color: $th-bg;\r\n }\r\n td.sticky-cell {\r\n position: sticky;\r\n z-index: 101;\r\n background-color: white;\r\n }\r\n }\r\n\r\n &--scrolled-left {\r\n th.sticky-left-edge,\r\n td.sticky-left-edge {\r\n overflow: visible;\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 100%;\r\n right: -20px;\r\n width: 20px;\r\n height: 100%;\r\n z-index: 101 !important;\r\n box-shadow: inset 12px 0 20px -25px;\r\n opacity: 1;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &--scrolled-right {\r\n th.sticky-right-edge,\r\n td.sticky-right-edge {\r\n overflow: visible;\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -20px;\r\n width: 20px;\r\n height: 100%;\r\n z-index: 101 !important;\r\n box-shadow: inset -12px 0 20px -25px;\r\n opacity: 1;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &--no-data {\r\n thead {\r\n opacity: 0.4;\r\n tr {\r\n th {\r\n &.sd-th {\r\n border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n sd-td,\r\n sd-th,\r\n .sd-th__content--label {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n word-break: keep-all;\r\n }\r\n\r\n thead {\r\n height: 36px;\r\n\r\n sd-tr {\r\n width: 100%;\r\n\r\n sd-th {\r\n background: $th-bg;\r\n height: 36px;\r\n padding: 0 16px;\r\n font-weight: 500;\r\n vertical-align: middle;\r\n border-bottom: 1px solid $grey_30;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n position: relative;\r\n\r\n &.sd-th {\r\n .sd-th__content {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 4px;\r\n\r\n &--left {\r\n justify-content: flex-start;\r\n }\r\n &--center {\r\n justify-content: center;\r\n }\r\n &--right {\r\n justify-content: flex-end;\r\n }\r\n }\r\n\r\n .sd-th__resizer {\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n transform: translateY(-50%);\r\n width: 4px;\r\n height: 16px;\r\n cursor: col-resize;\r\n z-index: 3;\r\n border-left: 1px solid $grey_45;\r\n border-right: 1px solid $grey_45;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n sd-tbody {\r\n .sd-table__loading {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: calc(var(--table-height, auto) - 36px);\r\n min-height: calc(100% - 36px);\r\n background: rgba(255, 255, 255, 0.6);\r\n z-index: 200;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n sd-tr {\r\n &:last-of-type {\r\n sd-td {\r\n border-bottom: none;\r\n }\r\n }\r\n sd-td {\r\n height: 44px;\r\n padding: 0 16px;\r\n border-bottom: 1px solid $grey_30;\r\n background: white;\r\n vertical-align: middle;\r\n\r\n &.sd-td {\r\n &--left {\r\n text-align: left;\r\n }\r\n &--center {\r\n text-align: center;\r\n }\r\n &--right {\r\n text-align: right;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .sd-table__bottom {\r\n background: white;\r\n text-align: center;\r\n }\r\n }\r\n\r\n .sd-table__pagination {\r\n position: relative;\r\n background: $grey_05;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid $grey_30;\r\n border-top: none;\r\n border-radius: 8px;\r\n\r\n sd-select {\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n\r\n .sd-select {\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n Watch,\r\n h,\r\n EventEmitter,\r\n Host,\r\n} from '@stencil/core';\r\nimport { CheckedType } from '../sd-checkbox/sd-checkbox';\r\nimport { SelectOption } from '../sd-select/sd-select';\r\nimport { SdSelectCustomEvent } from '../../components';\r\n\r\nexport type SdTableSortDir = 'asc' \| 'desc' \| 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string \| ((row: any) => any);\r\n align?: 'left' \| 'center' \| 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: Record<string, any>;\r\n tdClass?: string;\r\n thClass?: string;\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns!: SdTableColumn[];\r\n @Prop({ mutable: true }) rows!: Row[];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() width?: string;\r\n @Prop() height?: string;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() stickyColumn: { left?: number; right?: number } = { left: 0, right: 0 };\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() isLoading: boolean = false;\r\n @Prop() pagination?: {\r\n page: number;\r\n rowsPerPage: number;\r\n lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n column: SdTableColumn,\r\n row: Row,\r\n ) => HTMLElement \| string \| null \| undefined;\r\n @Prop() useInternalPagination: boolean = false;\r\n @Prop() useRowsPerPageSelect: boolean = false;\r\n @Prop() rowsPerPageOption: SelectOption[] = [\r\n { label: '10개씩 보기', value: 10 },\r\n { label: '25개씩 보기', value: 25 },\r\n { label: '50개씩 보기', value: 50 },\r\n { label: '100개씩 보기', value: 100 },\r\n ];\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n @Event() sdRowsPerPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page \|\| 1;\r\n @State() innerRows: Row[] = [];\r\n @State() innerSelected: Set<Row> = new Set();\r\n @State() columnWidths: number[] = [];\r\n @State() scrolledLeft: boolean = false;\r\n @State() scrolledRight: boolean = false;\r\n\r\n @Watch('columns')\r\n handleColumnsChange(newCols: SdTableColumn[]) {\r\n this.columnWidths = newCols.map(c => parseInt(c.width \|\| '120', 10));\r\n }\r\n\r\n @Watch('rows')\r\n handleRowsChange(newRows: Row[]) {\r\n this.innerRows = [...newRows];\r\n }\r\n\r\n @Watch('selected')\r\n handleSelectedChange(newSelected: Set<Row>) {\r\n this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n handlePaginationChange(\r\n newVal?: { page: number; rowsPerPage: number; lastPage?: number } \| undefined,\r\n ) {\r\n if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n this.innerRows = [...(this.rows \|\| [])];\r\n this.innerSelected = new Set(this.selected);\r\n this.columnWidths = (this.columns \|\| []).map(c => parseInt(c.width \|\| '120', 10));\r\n }\r\n\r\n componentDidLoad() {\r\n // SSR 환경 체크\r\n if (typeof window === 'undefined') return;\r\n\r\n const middle = this.el.querySelector('.sd-table__middle');\r\n if (!middle) return;\r\n\r\n const onScroll = () => {\r\n const { scrollLeft, scrollWidth, clientWidth } = middle as HTMLElement;\r\n this.scrolledLeft = scrollLeft > 0;\r\n this.scrolledRight = scrollLeft + clientWidth < scrollWidth;\r\n };\r\n middle.addEventListener('scroll', onScroll, { passive: true });\r\n onScroll();\r\n }\r\n\r\n // ----- Derived getters -----\r\n private get visibleColumns(): SdTableColumn[] {\r\n return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private get paginatedRows(): Row[] {\r\n if (!this.pagination \|\| !this.useInternalPagination) return this.innerRows;\r\n\r\n const { rowsPerPage = this.rows.length } = this.pagination \|\| {};\r\n\r\n const result = this.innerRows.slice(\r\n (this.currentPage - 1) * rowsPerPage,\r\n this.currentPage * rowsPerPage,\r\n );\r\n\r\n return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n const { lastPage, rowsPerPage = this.rows.length } = this.pagination \|\| {};\r\n\r\n return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n return [\r\n 'sd-table',\r\n this.stickyHeader && 'sd-table--sticky-header',\r\n this.selectable && 'sd-table--selectable',\r\n this.resizable && 'sd-table--resizable',\r\n !this.innerRows.length && 'sd-table--no-data',\r\n ((this.stickyColumn?.left ?? 0) > 0 \|\| (this.stickyColumn?.right ?? 0) > 0) &&\r\n 'sd-table--sticky-column',\r\n this.scrolledLeft && 'sd-table--scrolled-left',\r\n this.scrolledRight && 'sd-table--scrolled-right',\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n }\r\n\r\n // ----- Selection -----\r\n // private isRowSelected(row: Row): boolean {\r\n // return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);\r\n // }\r\n\r\n // private updateRowSelect(row: Row) {\r\n // const selectedArray = Array.from(this.innerSelected);\r\n // const exists = this.isRowSelected(row);\r\n // const newSelected = exists\r\n // ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n // : [...selectedArray, row];\r\n\r\n // // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n // if (newSelected.length === selectedArray.length) return;\r\n\r\n // this.innerSelected = new Set(newSelected);\r\n // this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n // }\r\n\r\n private toggleSelectAll(checked: CheckedType) {\r\n if (checked) {\r\n const pageRows = new Set([...this.paginatedRows]);\r\n this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n } else {\r\n const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n this.innerSelected = new Set(\r\n [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n );\r\n }\r\n\r\n this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean \| null {\r\n const total = this.paginatedRows.length;\r\n const selectedCount = this.paginatedRows.filter(row =>\r\n Array.from(this.innerSelected).some(\r\n selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n ),\r\n ).length;\r\n\r\n if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n if (selectedCount === total) return true; // 전부 선택됨\r\n return null; // 일부만 선택됨\r\n }\r\n\r\n // ----- Helpers -----\r\n private getStickyStyle(colIdx: number) {\r\n const leftOffset =\r\n this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);\r\n const rightOffset = this.columnWidths\r\n .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right \|\| 0) && i > colIdx)\r\n .reduce((a, b) => a + b, 0);\r\n return {\r\n '--sticky-left-offset': `${leftOffset}px`,\r\n '--sticky-right-offset': `${rightOffset}px`,\r\n 'width': `${this.columnWidths[colIdx]}px`,\r\n 'minWidth': `${this.columnWidths[colIdx]}px`,\r\n 'maxWidth': `${this.columnWidths[colIdx]}px`,\r\n };\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n // SSR 환경 체크\r\n if (typeof document === 'undefined') return;\r\n\r\n const startX = event.clientX;\r\n const startWidth = this.columnWidths[index];\r\n\r\n const handleMouseMove = (moveEvent: MouseEvent) => {\r\n const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n };\r\n\r\n const handleMouseUp = () => {\r\n document.removeEventListener('mousemove', handleMouseMove);\r\n document.removeEventListener('mouseup', handleMouseUp);\r\n };\r\n\r\n document.addEventListener('mousemove', handleMouseMove);\r\n document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n // private getCellValue(column: SdTableColumn, row: Row) {\r\n // const { field, format, name } = column;\r\n // const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];\r\n // return format ? format(value, row) : value;\r\n // }\r\n\r\n // ----- Render -----\r\n private renderHeader() {\r\n return (\r\n <thead>\r\n <sd-tr>\r\n {this.selectable && (\r\n <sd-th\r\n class={{\r\n 'sd-th': true,\r\n 'sd-th--selected': true,\r\n 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),\r\n }}\r\n style={{\r\n '--sticky-left-offset': '0px',\r\n }}\r\n >\r\n <sd-checkbox\r\n checked={this.isAllChecked}\r\n disabled={!this.paginatedRows.length}\r\n onSdChange={(e: CustomEvent<CheckedType>) => this.toggleSelectAll(e.detail)}\r\n ></sd-checkbox>\r\n </sd-th>\r\n )}\r\n {this.visibleColumns.map((col, colIdx) => (\r\n <sd-th\r\n key={col.name}\r\n class={{\r\n 'sd-th': true,\r\n [`${col.thClass}`]: Boolean(col.thClass),\r\n 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n 'sticky-right': Boolean(\r\n this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n ),\r\n 'sticky-left-edge': Boolean(\r\n this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n ),\r\n 'sticky-right-edge': Boolean(\r\n this.stickyColumn.right &&\r\n colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n ),\r\n }}\r\n style={this.getStickyStyle(colIdx)}\r\n >\r\n <div class={`sd-th__content sd-th__content--${col.align \|\| 'left'}`}>\r\n <slot name={`header-cell-${col.name}`}>\r\n <div class=\"sd-th__content--label\">{col.label}</div>\r\n </slot>\r\n\r\n {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n {col.tooltip && (\r\n <sd-tooltip {...col.tooltipOptions}>\r\n <div slot=\"content\">\r\n {col.tooltip.map(text => (\r\n <p>{text}</p>\r\n ))}\r\n </div>\r\n </sd-tooltip>\r\n )}\r\n </div>\r\n\r\n {this.resizable && typeof window !== 'undefined' && (\r\n <div\r\n class=\"sd-th__resizer\"\r\n onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n ></div>\r\n )}\r\n </sd-th>\r\n ))}\r\n </sd-tr>\r\n </thead>\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class=\"sd-table__wrapper\"\r\n style={{\r\n '--table-width': this.width,\r\n '--table-height': this.height,\r\n }}\r\n >\r\n <div class=\"sd-table__container\">\r\n <div class=\"sd-table__middle\" role=\"table\">\r\n <div part=\"table\" class={this.sdTableClasses}>\r\n {this.renderHeader()}\r\n <sd-tbody>\r\n <slot></slot>\r\n </sd-tbody>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sd-table__bottom\"></div>\r\n </div>\r\n {this.pagination && this.innerRows.length > 0 && (\r\n <div class=\"sd-table__pagination\">\r\n <sd-pagination\r\n currentPage={!this.useInternalPagination ? this.pagination.page : this.currentPage}\r\n lastPage={!this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber}\r\n onPageChange={(e: CustomEvent<number>) => {\r\n if (!this.useInternalPagination) {\r\n this.sdPageChange.emit(e.detail);\r\n } else {\r\n this.currentPage = e.detail;\r\n this.sdPageChange.emit(this.currentPage);\r\n }\r\n }}\r\n ></sd-pagination>\r\n\r\n {this.useRowsPerPageSelect && (\r\n <sd-select\r\n value={this.pagination.rowsPerPage}\r\n options={this.rowsPerPageOption}\r\n width=\"128px\"\r\n onSdChange={(e: SdSelectCustomEvent<{ value: string \| number \| null }>) => {\r\n const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;\r\n if (!this.useInternalPagination) {\r\n this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n } else {\r\n const newRowsPerPage = Number(e.detail.value \|\| 0);\r\n let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));\r\n let newCurrentPage = this.currentPage;\r\n\r\n if (newCurrentPage > newLastPage) {\r\n newCurrentPage = newLastPage;\r\n }\r\n\r\n this.pagination = {\r\n page: newCurrentPage,\r\n rowsPerPage: newRowsPerPage,\r\n lastPage: newLastPage,\r\n };\r\n this.currentPage = newCurrentPage;\r\n this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n }\r\n }}\r\n ></sd-select>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-tabs.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SdTabs extends Components.SdTabs, HTMLElement {}
+export const SdTabs: {
+    prototype: SdTabs;
+    new (): SdTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sd-tabs.js ADDED Viewed

@@ -0,0 +1,101 @@
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
+import { d as defineCustomElement$2 } from './p-CLNPwi8e.js';
+const sdTabsCss = () => `sd-tabs{display:inline-block}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075ff}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #cccccc;border-bottom:none;border-radius:4px 4px 0 0;background-color:#f6f6f6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075ff;color:#0075ff;background-color:white;font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075ff;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{display:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;font-weight:700;border-bottom:1px solid #0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected:hover::before,sd-tabs .sd-tabs--sub .sd-tabs__tab--unselected:hover::before{display:none}`;
+const SdTabs$1 = /*@__PURE__*/ proxyCustomElement(class SdTabs extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdChange = createEvent(this, "sdChange");
+    }
+    value;
+    tabs = [];
+    size = 'md';
+    isSub = false;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value !== undefined && this.value !== null) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleTabClick = (tabValue) => {
+        this.selectedValue = tabValue;
+        this.value = tabValue;
+        this.sdChange.emit(tabValue);
+    };
+    isTabSelected(tab) {
+        return this.selectedValue === tab.value;
+    }
+    getTabClasses(tab) {
+        const classes = [
+            'sd-tabs__tab',
+            this.isTabSelected(tab) ? 'sd-tabs__tab--selected' : 'sd-tabs__tab--unselected',
+        ];
+        return classes.join(' ');
+    }
+    getContainerClasses() {
+        const classes = ['sd-tabs', `sd-tabs--${this.size}`];
+        if (this.isSub) {
+            classes.push('sd-tabs--sub');
+        }
+        return classes.join(' ');
+    }
+    getBadgeColors(tab) {
+        if (this.isTabSelected(tab)) {
+            return { bgColor: '#E6F1FF', textColor: '#0075FF' };
+        }
+        return { bgColor: '#E5E5E5', textColor: '#737373' };
+    }
+    render() {
+        return (h("div", { key: '749c892c45eccc71e2faad842be4dfd311aa2eed', class: this.getContainerClasses(), role: "tablist" }, this.tabs.map((tab, index) => {
+            const isSelected = this.isTabSelected(tab);
+            const badgeColors = this.getBadgeColors(tab);
+            return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), role: "tab", "aria-selected": isSelected.toString(), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { class: "sd-tabs__label" }, tab.label), tab.badge && (h("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: true }))));
+        })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return sdTabsCss(); }
+}, [768, "sd-tabs", {
+        "value": [1537],
+        "tabs": [1040],
+        "size": [1],
+        "isSub": [4, "is-sub"],
+        "selectedValue": [32]
+    }, undefined, {
+        "value": ["valueChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-tabs", "sd-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-tabs":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdTabs$1);
+            }
+            break;
+        case "sd-tag":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const SdTabs = SdTabs$1;
+const defineCustomElement = defineCustomElement$1;
+export { SdTabs, defineCustomElement };
+//# sourceMappingURL=sd-tabs.js.map
+//# sourceMappingURL=sd-tabs.js.map

package/dist/components/sd-tabs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sd-tabs.js","mappings":"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","names":["SdTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tabs/sd-tabs.scss?tag=sd-tabs","src/components/sd-tabs/sd-tabs.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-tabs {\r\n display: inline-block;\r\n\r\n .sd-tabs {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 4px;\r\n border-bottom: 1px solid $brilliantblue_75;\r\n\r\n &__tab {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n cursor: pointer;\r\n border: 1px solid $grey_45;\r\n border-bottom: none;\r\n border-radius: 4px 4px 0 0;\r\n background-color: $grey_10;\r\n color: $grey_65;\r\n font-weight: 400;\r\n transition: all 0.2s ease;\r\n position: relative;\r\n user-select: none;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n transition: all 0.3s;\r\n }\r\n\r\n // Selected/Active state\r\n &--selected {\r\n border-color: $brilliantblue_75;\r\n color: $brilliantblue_75;\r\n background-color: white;\r\n font-weight: 700;\r\n\r\n // Hover state for selected tab\r\n &:hover::before {\r\n background-color: $brilliantblue_75;\r\n opacity: 0.15;\r\n }\r\n }\r\n\r\n // Unselected state hover\r\n &--unselected {\r\n &:hover::before {\r\n background-color: $grey_65;\r\n opacity: 0.15;\r\n }\r\n }\r\n }\r\n\r\n &__label {\r\n user-select: none;\r\n }\r\n\r\n // Size: Medium (default)\r\n &--md {\r\n .sd-tabs__tab {\r\n padding: 12px 32px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n }\r\n }\r\n\r\n // Size: Small\r\n &--sm {\r\n .sd-tabs__tab {\r\n padding: 8px 20px;\r\n font-size: 12px;\r\n line-height: 16px;\r\n }\r\n }\r\n\r\n &--sub {\r\n gap: 32px;\r\n border-bottom: none;\r\n\r\n .sd-tabs__tab {\r\n border: none;\r\n border-radius: 0;\r\n background-color: transparent;\r\n color: $grey_95;\r\n font-weight: 400;\r\n padding: 0 0 2px 0;\r\n\r\n &::before {\r\n display: none;\r\n }\r\n\r\n &--selected {\r\n color: $brilliantblue_75;\r\n font-weight: 700;\r\n border-bottom: 1px solid $brilliantblue_75;\r\n background-color: transparent;\r\n }\r\n\r\n &--selected:hover::before,\r\n &--unselected:hover::before {\r\n display: none;\r\n }\r\n }\r\n }\r\n }\r\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type TabOption = {\r\n label: string;\r\n value: string;\r\n badge?: string | number;\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tabs',\r\n styleUrl: 'sd-tabs.scss',\r\n})\r\nexport class SdTabs {\r\n @Prop({ mutable: true, reflect: true }) value!: string;\r\n\r\n @Prop({ mutable: true }) tabs: TabOption[] = [];\r\n\r\n @Prop() size: 'sm' | 'md' = 'md';\r\n\r\n @Prop() isSub: boolean = false;\r\n\r\n @State() private selectedValue!: string;\r\n\r\n @Event()\r\n sdChange!: EventEmitter<string>;\r\n\r\n componentWillLoad() {\r\n if (this.value !== undefined && this.value !== null) {\r\n this.selectedValue = this.value;\r\n }\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string) {\r\n this.selectedValue = newValue;\r\n }\r\n\r\n private handleTabClick = (tabValue: string) => {\r\n this.selectedValue = tabValue;\r\n this.value = tabValue;\r\n this.sdChange.emit(tabValue);\r\n };\r\n\r\n private isTabSelected(tab: TabOption): boolean {\r\n return this.selectedValue === tab.value;\r\n }\r\n\r\n private getTabClasses(tab: TabOption): string {\r\n const classes = [\r\n 'sd-tabs__tab',\r\n this.isTabSelected(tab) ? 'sd-tabs__tab--selected' : 'sd-tabs__tab--unselected',\r\n ];\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private getContainerClasses(): string {\r\n const classes = ['sd-tabs', `sd-tabs--${this.size}`];\r\n\r\n if (this.isSub) {\r\n classes.push('sd-tabs--sub');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private getBadgeColors(tab: TabOption): { bgColor: string; textColor: string } {\r\n if (this.isTabSelected(tab)) {\r\n return { bgColor: '#E6F1FF', textColor: '#0075FF' };\r\n }\r\n return { bgColor: '#E5E5E5', textColor: '#737373' };\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={this.getContainerClasses()} role=\"tablist\">\r\n {this.tabs.map((tab, index) => {\r\n const isSelected = this.isTabSelected(tab);\r\n const badgeColors = this.getBadgeColors(tab);\r\n\r\n return (\r\n <div\r\n key={`tab-${index}`}\r\n class={this.getTabClasses(tab)}\r\n role=\"tab\"\r\n aria-selected={isSelected.toString()}\r\n aria-label={tab.label || 'tab'}\r\n onClick={() => this.handleTabClick(tab.value)}\r\n >\r\n <span class=\"sd-tabs__label\">{tab.label}</span>\r\n {tab.badge && (\r\n <sd-tag\r\n size={this.size}\r\n label={tab.badge.toString()}\r\n bgColor={badgeColors.bgColor}\r\n textColor={badgeColors.textColor}\r\n rounded={true}\r\n />\r\n )}\r\n </div>\r\n );\r\n })}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-tag.js CHANGED Viewed

@@ -1,79 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-TFWJruz2.js';
-const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
-const TAG_COLORS = {
-    grey: 'bg-grey_20 text-grey_70',
-    red: 'bg-red_15 text-red_70',
-    orange: 'bg-orange_10 text-orange_65',
-    yellow: 'bg-yellow_10 text-yellow_60',
-    green: 'bg-green_15 text-green_70',
-    blue: 'bg-brilliantblue_20 text-brilliantblue_75',
-    darkblue: 'bg-oceanblue_15 text-oceanblue_70',
-    indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
-};
-const SdTag$1 = /*@__PURE__*/ proxyCustomElement(class SdTag extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    get el() { return this; }
-    size = 'md';
-    color = 'grey';
-    rounded = false;
-    label = '';
-    bgColor;
-    textColor;
-    getTagClasses() {
-        const classes = ['sd-tag', `sd-tag--${this.size}`];
-        if (this.rounded) {
-            classes.push('sd-tag--rounded');
-        }
-        if (this.color && !this.bgColor && !this.textColor) {
-            classes.push(TAG_COLORS[this.color]);
-        }
-        if (this.bgColor || this.textColor) {
-            classes.push('sd-tag--custom-color');
-        }
-        return classes.join(' ');
-    }
-    renderContent() {
-        return [
-            h("span", { class: "sd-tag__content" }, h("slot", null, this.label)),
-        ];
-    }
-    render() {
-        const tagClasses = this.getTagClasses();
-        return (h("span", { key: '3ab30b01fbf0c25426e7903ed05372399c380a01', class: tagClasses, style: {
-                '--tag-bg-color': this.bgColor,
-                '--tag-text-color': this.textColor,
-            }, "aria-label": this.label || 'tag' }, this.renderContent()));
-    }
-    static get style() { return sdTagCss; }
-}, [769, "sd-tag", {
-        "size": [1],
-        "color": [1],
-        "rounded": [4],
-        "label": [1],
-        "bgColor": [1, "bg-color"],
-        "textColor": [1, "text-color"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-tag"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdTag$1);
-            }
-            break;
-    } });
-}
+import { S as SdTag$1, d as defineCustomElement$1 } from './p-CLNPwi8e.js';
 const SdTag = SdTag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-tag.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,u+BAAu+B;;ACcx/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOYA,OAAK,iBAAAC,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[~~"SdTag","__stencil_proxyCustomElement","HTMLElement"~~],"sources":[~~"src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"~~],"sourcesContent":[~~":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width~~]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &__content {\r\n display: inline-block;\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n \| 'grey'\r\n \| 'red'\r\n \| 'orange'\r\n \| 'yellow'\r\n \| 'green'\r\n \| 'blue'\r\n \| 'darkblue'\r\n \| 'indigo';\r\n\r\nexport type TagSize = 'sm' \| 'md' \| 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor \|\| this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label \|\| 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"sd-tag.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sd-tbody.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdTbody$1, d as defineCustomElement$1 } from './p-BSUHSOXX.js';
+import { S as SdTbody$1, d as defineCustomElement$1 } from './p-Cf-LyLYk.js';
 const SdTbody = SdTbody$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-td.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
-const sdTdCss = "sd-td{display:table-cell;padding:12px 16px;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}";
+const sdTdCss = () => `sd-td{display:table-cell;padding:12px 16px;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}`;
 const SdTd$1 = /*@__PURE__*/ proxyCustomElement(class SdTd extends H {
     constructor(registerHost) {
@@ -14,13 +14,13 @@ const SdTd$1 = /*@__PURE__*/ proxyCustomElement(class SdTd extends H {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '6459518995f28a8138b3f669876c90dd24e610c2', role: "cell", class: {
+        return (h(Host, { key: '182bd00cbbb22b4f3613e973d2999421a3f5f2cd', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: 'bf51d35dee9adb6a88b29a6c51be9f73ae1ab3b5' })));
+            }, style: this.tdStyle }, h("slot", { key: 'fff1a74106822c8092fa57ba785f6ab5be96edcd' })));
     }
-    static get style() { return sdTdCss; }
+    static get style() { return sdTdCss(); }
 }, [772, "sd-td", {
         "name": [1],
         "align": [1],
@@ -34,8 +34,8 @@ function defineCustomElement$1() {
     const components = ["sd-td"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-td":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdTd$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdTd$1);
             }
             break;
     } });

package/dist/components/sd-td.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-td.js","mappings":";;AAAA,MAAM,OAAO,GAAG,~~iJAAiJ~~;;~~MCMpJA~~,MAAI,iBAAAC,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IACR,IAAI,GAAW,EAAE;IACjB,KAAK,GAAgC,MAAM;AAC3C,IAAA,OAAO;AACP,IAAA,OAAO;IAEf,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACN,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,CAAC,UAAU,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC9B,gBAAA,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;AAC3C,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,OAAO,EAAA,EAEnB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdTd","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-td/sd-td.scss?tag=sd-td","src/components/sd-table/sd-td/sd-td.tsx"],"sourcesContent":["sd-td {\r\n display: table-cell;\r\n padding: 12px 16px;\r\n vertical-align: middle;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n word-break: keep-all;\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-td',\r\n styleUrl: 'sd-td.scss',\r\n})\r\nexport class SdTd {\r\n @Prop() name: string = '';\r\n @Prop() align: 'left' \| 'center' \| 'right' = 'left';\r\n @Prop() tdStyle?: Record<string, string>;\r\n @Prop() tdClass?: string;\r\n\r\n render() {\r\n return (\r\n <Host\r\n role=\"cell\"\r\n class={{\r\n 'sd-td': true,\r\n [`sd-td--${this.align}`]: true,\r\n [this.tdClass \|\| '']: Boolean(this.tdClass),\r\n }}\r\n style={this.tdStyle}\r\n >\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"sd-td.js","mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,+IAA+I,CAAC;;MCM1JA,MAAI,iBAAAC,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IACR,IAAI,GAAW,EAAE;IACjB,KAAK,GAAgC,MAAM;AAC3C,IAAA,OAAO;AACP,IAAA,OAAO;IAEf,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACN,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,CAAC,UAAU,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC9B,gBAAA,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;AAC3C,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,OAAO,EAAA,EAEnB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdTd","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-td/sd-td.scss?tag=sd-td","src/components/sd-table/sd-td/sd-td.tsx"],"sourcesContent":["sd-td {\r\n display: table-cell;\r\n padding: 12px 16px;\r\n vertical-align: middle;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n word-break: keep-all;\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-td',\r\n styleUrl: 'sd-td.scss',\r\n})\r\nexport class SdTd {\r\n @Prop() name: string = '';\r\n @Prop() align: 'left' \| 'center' \| 'right' = 'left';\r\n @Prop() tdStyle?: Record<string, string>;\r\n @Prop() tdClass?: string;\r\n\r\n render() {\r\n return (\r\n <Host\r\n role=\"cell\"\r\n class={{\r\n 'sd-td': true,\r\n [`sd-td--${this.align}`]: true,\r\n [this.tdClass \|\| '']: Boolean(this.tdClass),\r\n }}\r\n style={this.tdStyle}\r\n >\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-th.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdTh$1, d as defineCustomElement$1 } from './p-D8f0ASS6.js';
+import { S as SdTh$1, d as defineCustomElement$1 } from './p-CVtij2QI.js';
 const SdTh = SdTh$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-toast-message.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SdToastMessage extends Components.SdToastMessage, HTMLElement {}
+export const SdToastMessage: {
+    prototype: SdToastMessage;
+    new (): SdToastMessage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sd-toast-message.js ADDED Viewed

@@ -0,0 +1,101 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
+import { r as resolveColor } from './p-BYf-ybt2.js';
+import { d as defineCustomElement$3 } from './p-B05GJor3.js';
+import { d as defineCustomElement$2 } from './p-CV5tKC24.js';
+const sdToastMessageCss = () => `.sd-toast-message.sc-sd-toast-message{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-toast-message--hidden.sc-sd-toast-message{opacity:0;visibility:hidden;pointer-events:none}.sd-toast-message__icon.sc-sd-toast-message{display:flex;align-items:center;flex-shrink:0}.sd-toast-message__content.sc-sd-toast-message{display:flex;flex:1}.sd-toast-message__message.sc-sd-toast-message{font-size:14px;line-height:20px;font-weight:400}.sd-toast-message__link.sc-sd-toast-message{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}.sd-toast-message__link.sc-sd-toast-message:hover{opacity:0.8}.sd-toast-message__button.sc-sd-toast-message{flex-shrink:0}.sd-toast-message__button.sc-sd-toast-message button.sc-sd-toast-message{color:var(--button-text-color, inherit) !important}.sd-toast-message__close.sc-sd-toast-message{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}.sd-toast-message__close.sc-sd-toast-message:hover{opacity:0.7}.sd-toast-message__close.sc-sd-toast-message:active{opacity:0.5}`;
+const SdToastMessage$1 = /*@__PURE__*/ proxyCustomElement(class SdToastMessage extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdClose = createEvent(this, "sdClose");
+        this.sdButtonClick = createEvent(this, "sdButtonClick");
+    }
+    icon;
+    message;
+    link;
+    linkLabel;
+    buttonLabel;
+    close = false;
+    type = 'basicDark';
+    sdClose;
+    sdButtonClick;
+    isVisible = true;
+    static COLOR_OF_TYPE = {
+        basicLight: { background: 'white', text: 'grey_95' },
+        basicDark: { background: 'steelblue_90', text: 'white' },
+        error: { background: 'red_70', text: 'white' },
+        caution: { background: 'yellow_45', text: 'grey_90' },
+        complete: { background: 'green_75', text: 'white' },
+        progress: { background: 'brilliantblue_80', text: 'white' },
+    };
+    handleClose = () => {
+        this.isVisible = false;
+        this.sdClose.emit();
+    };
+    handleButtonClick = () => {
+        this.sdButtonClick.emit();
+    };
+    getContainerClasses() {
+        const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
+        if (!this.isVisible) {
+            classes.push('sd-toast-message--hidden');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];
+        const colors = {
+            background: resolveColor(colorTokens.background),
+            text: resolveColor(colorTokens.text),
+        };
+        return (h(Host, { key: '4d342822195d44b49e5976e8d5e66fc7a58301b9', style: {
+                '--sd-toast-bg': colors.background,
+                '--sd-toast-text': colors.text,
+            } }, h("div", { key: '2b33303cc0fc474d9c58a83a925a43b59f577125', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'a7b7c49a4a15c76f0633520046128ce937e6410d', class: "sd-toast-message__icon" }, h("sd-icon", { key: '7c61a7142e8e442936c9b2736cbcf8ebf8521087', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'd0606186e02a44ba81ba3924baa0bdd8b34984f1', class: "sd-toast-message__content" }, h("span", { key: '52e689c1e1d6a7170381a46f8c9370105386aac7', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '0818b9ffe71bd2cbe9fc00bfab9f8a6591f03cbd', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '4d4d7b15137574db44b64e3dc62010fe8ccdf530', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.close && (h("button", { key: '991ad8fe130c370f24ce23cf6d98a9ac797f7367', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: 'd71dee73974143e5b6eb92f4135d40ee1df178fb', name: "close", size: 12, color: colors.text }))))));
+    }
+    static get style() { return sdToastMessageCss(); }
+}, [770, "sd-toast-message", {
+        "icon": [1],
+        "message": [1],
+        "link": [1],
+        "linkLabel": [1, "link-label"],
+        "buttonLabel": [1, "button-label"],
+        "close": [4],
+        "type": [1],
+        "isVisible": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-toast-message", "sd-button", "sd-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-toast-message":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdToastMessage$1);
+            }
+            break;
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const SdToastMessage = SdToastMessage$1;
+const defineCustomElement = defineCustomElement$1;
+export { SdToastMessage, defineCustomElement };
+//# sourceMappingURL=sd-toast-message.js.map
+//# sourceMappingURL=sd-toast-message.js.map

package/dist/components/sd-toast-message.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sd-toast-message.js","mappings":"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","names":["SdToastMessage","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-toast-message/sd-toast-message.scss?tag=sd-toast-message&encapsulation=scoped","src/components/sd-toast-message/sd-toast-message.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-toast-message {\r\n display: flex;\r\n width: fit-content;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 12px 24px;\r\n border-radius: 4px;\r\n background-color: var(--sd-toast-bg);\r\n color: var(--sd-toast-text);\r\n transition: opacity 0.2s ease, visibility 0.2s ease;\r\n box-shadow: 2px 2px 8px 2px #00000033;\r\n\r\n &--hidden {\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n }\r\n\r\n &__icon {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__content {\r\n display: flex;\r\n flex: 1;\r\n }\r\n\r\n &__message {\r\n font-size: 14px;\r\n line-height: 20px;\r\n font-weight: 400;\r\n }\r\n\r\n &__link {\r\n font-size: 14px;\r\n line-height: 20px;\r\n color: var(--sd-toast-text);\r\n text-decoration: underline;\r\n cursor: pointer;\r\n transition: opacity 0.2s ease;\r\n margin-left: 4px;\r\n\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n }\r\n\r\n &__button {\r\n flex-shrink: 0;\r\n\r\n button {\r\n color: var(--button-text-color, inherit) !important;\r\n }\r\n }\r\n\r\n &__close {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 4px;\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: opacity 0.2s ease;\r\n flex-shrink: 0;\r\n\r\n &:hover {\r\n opacity: 0.7;\r\n }\r\n\r\n &:active {\r\n opacity: 0.5;\r\n }\r\n }\r\n}","import { Component, Prop, h, Event, EventEmitter, State, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ToastType = 'basicLight' | 'basicDark' | 'error' | 'caution' | 'complete' | 'progress';\r\n\r\n@Component({\r\n tag: 'sd-toast-message',\r\n styleUrl: 'sd-toast-message.scss',\r\n scoped: true,\r\n})\r\nexport class SdToastMessage {\r\n @Prop() icon?: IconName;\r\n\r\n @Prop() message!: string;\r\n\r\n @Prop() link?: string;\r\n\r\n @Prop() linkLabel?: string;\r\n\r\n @Prop() buttonLabel?: string;\r\n\r\n @Prop() close: boolean = false;\r\n\r\n @Prop() type: ToastType = 'basicDark';\r\n\r\n @Event()\r\n sdClose!: EventEmitter<void>;\r\n\r\n @Event()\r\n sdButtonClick!: EventEmitter<void>;\r\n\r\n @State() private isVisible: boolean = true;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n basicLight: { background: 'white', text: 'grey_95' },\r\n basicDark: { background: 'steelblue_90', text: 'white' },\r\n error: { background: 'red_70', text: 'white' },\r\n caution: { background: 'yellow_45', text: 'grey_90' },\r\n complete: { background: 'green_75', text: 'white' },\r\n progress: { background: 'brilliantblue_80', text: 'white' },\r\n };\r\n\r\n private handleClose = () => {\r\n this.isVisible = false;\r\n this.sdClose.emit();\r\n };\r\n\r\n private handleButtonClick = () => {\r\n this.sdButtonClick.emit();\r\n };\r\n\r\n private getContainerClasses(): string {\r\n const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];\r\n\r\n if (!this.isVisible) {\r\n classes.push('sd-toast-message--hidden');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n render() {\r\n const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];\r\n const colors = {\r\n background: resolveColor(colorTokens.background),\r\n text: resolveColor(colorTokens.text),\r\n };\r\n\r\n return (\r\n <Host\r\n style={{\r\n '--sd-toast-bg': colors.background,\r\n '--sd-toast-text': colors.text,\r\n }}\r\n >\r\n <div class={this.getContainerClasses()} role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\r\n {this.icon && (\r\n <div class=\"sd-toast-message__icon\">\r\n <sd-icon name={this.icon} size={16} color={colors.text}></sd-icon>\r\n </div>\r\n )}\r\n\r\n <div class=\"sd-toast-message__content\">\r\n <span class=\"sd-toast-message__message\">{this.message}</span>\r\n </div>\r\n\r\n {this.link && (\r\n <a href={this.link} class=\"sd-toast-message__link\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n {this.linkLabel || this.link}\r\n </a>\r\n )}\r\n\r\n {this.buttonLabel && (\r\n <sd-button\r\n class={`sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`}\r\n label={this.buttonLabel}\r\n variant=\"primary\"\r\n color={this.type === 'basicLight' ? 'oceanblue_75' : 'white'}\r\n size=\"sm\"\r\n onSdClick={this.handleButtonClick}\r\n style={this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {}}\r\n ></sd-button>\r\n )}\r\n\r\n {this.close && (\r\n <button\r\n type=\"button\"\r\n class=\"sd-toast-message__close\"\r\n onClick={this.handleClose}\r\n aria-label=\"Close\"\r\n title=\"Close\"\r\n >\r\n <sd-icon name=\"close\" size={12} color={colors.text}></sd-icon>\r\n </button>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-toggle-button.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SdToggleButton extends Components.SdToggleButton, HTMLElement {}
+export const SdToggleButton: {
+    prototype: SdToggleButton;
+    new (): SdToggleButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;