@sellmate/design-system 1.0.62 → 1.0.64

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

@@ -0,0 +1,54 @@
+sd-switch {
+  display: inline-block;
+  line-height: 0;
+}
+sd-switch .sd-switch {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sd-switch-gap);
+}
+sd-switch .sd-switch > input {
+  display: none;
+}
+sd-switch .sd-switch__track {
+  position: relative;
+  width: var(--sd-switch-track-width);
+  height: var(--sd-switch-track-height);
+  border-radius: var(--sd-switch-track-radius);
+  background: var(--sd-switch-bg-off);
+  transition: background-color 0.2s ease;
+}
+sd-switch .sd-switch__knob {
+  position: absolute;
+  top: var(--sd-switch-track-padding);
+  left: var(--sd-switch-track-padding);
+  width: var(--sd-switch-knob-size);
+  height: var(--sd-switch-knob-size);
+  border-radius: 50%;
+  background: var(--sd-switch-knob-bg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+  transition: transform 0.2s ease;
+}
+sd-switch .sd-switch__label {
+  font-family: var(--sd-switch-font-family);
+  font-weight: var(--sd-switch-font-weight);
+  font-size: var(--sd-switch-font-size);
+  line-height: var(--sd-switch-line-height);
+  text-decoration: var(--sd-switch-text-decoration);
+}
+sd-switch .sd-switch--on .sd-switch__track {
+  background: var(--sd-switch-bg-on);
+}
+sd-switch .sd-switch--on .sd-switch__knob {
+  transform: translateX(var(--sd-switch-knob-offset));
+}
+sd-switch .sd-switch--disabled {
+  cursor: not-allowed;
+}
+sd-switch .sd-switch--disabled.sd-switch--on .sd-switch__track {
+  background: var(--sd-switch-bg-disabled-on);
+}
+sd-switch .sd-switch--disabled.sd-switch--off .sd-switch__track {
+  background: var(--sd-switch-bg-disabled-off);
+}

package/dist/collection/components/{sd-toggle-button/sd-toggle-button.js → sd-switch/sd-switch.js}

@@ -1,26 +1,14 @@
 import { h } from "@stencil/core";
-export class SdToggleButton {
+import { SWITCH_COLORS, SWITCH_LAYOUT, SWITCH_TYPOGRAPHY } from "./sd-switch.config";
+export class SdSwitch {
     value = false;
     label = '';
     disabled = false;
-    isActive = false;
     change;
-    componentWillLoad() {
-        this.updateActiveState(this.value);
-    }
-    componentWillRender() {
-        this.updateActiveState(this.value);
-    }
-    updateActiveState(value) {
-        this.isActive = value;
-    }
-    get buttonClasses() {
-        const classes = ['sd-toggle-button'];
-        if (this.isActive) {
-            classes.push('sd-toggle-button--active');
-        }
+    get switchClasses() {
+        const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
         if (this.disabled) {
-            classes.push('sd-toggle-button--disabled');
+            classes.push('sd-switch--disabled');
         }
         return classes.join(' ');
     }
@@ -32,17 +20,37 @@ export class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '0e933c52b633eec101beec8aa6ec888dc6bc3448', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '833e7c26895e310cb6322b7231345f76f0a409dc', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        const knobOffset = SWITCH_LAYOUT.width - SWITCH_LAYOUT.knobSize - SWITCH_LAYOUT.paddingXY * 2;
+        const cssVars = {
+            '--sd-switch-track-width': `${SWITCH_LAYOUT.width}px`,
+            '--sd-switch-track-height': `${SWITCH_LAYOUT.height}px`,
+            '--sd-switch-track-padding': `${SWITCH_LAYOUT.paddingXY}px`,
+            '--sd-switch-track-radius': `${SWITCH_LAYOUT.radius}px`,
+            '--sd-switch-knob-size': `${SWITCH_LAYOUT.knobSize}px`,
+            '--sd-switch-knob-offset': `${knobOffset}px`,
+            '--sd-switch-knob-bg': SWITCH_COLORS.knobBg,
+            '--sd-switch-bg-on': SWITCH_COLORS.bgOn,
+            '--sd-switch-bg-off': SWITCH_COLORS.bgOff,
+            '--sd-switch-bg-disabled-on': SWITCH_COLORS.bgDisabledOn,
+            '--sd-switch-bg-disabled-off': SWITCH_COLORS.bgDisabledOff,
+            '--sd-switch-gap': `${SWITCH_LAYOUT.gap}px`,
+            '--sd-switch-font-family': SWITCH_TYPOGRAPHY.fontFamily,
+            '--sd-switch-font-weight': SWITCH_TYPOGRAPHY.fontWeight,
+            '--sd-switch-font-size': `${SWITCH_TYPOGRAPHY.fontSize}px`,
+            '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
+            '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
+        };
+        return (h("label", { key: '44ff8ae899d3f1d7f20df43cab5ceb0987d0dab3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'c7bd9e8ab470c575a52c33b482f83e0113917fda', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '604c57baaea22b389e0d19b2c8a06421ab44063e', class: "sd-switch__track" }, h("div", { key: 'a9329987d6c2295a90fe6b4904eeea98b075b30c', class: "sd-switch__knob" })), this.label && h("span", { key: '77cab17a2dbab5245f26c218a8b60f956770e316', class: "sd-switch__label" }, this.label)));
     }
-    static get is() { return "sd-toggle-button"; }
+    static get is() { return "sd-switch"; }
     static get originalStyleUrls() {
         return {
-            "$": ["sd-toggle-button.scss"]
+            "$": ["sd-switch.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["sd-toggle-button.css"]
+            "$": ["sd-switch.css"]
         };
     }
     static get properties() {
@@ -63,7 +71,7 @@ export class SdToggleButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "value",
                 "defaultValue": "false"
             },
@@ -109,11 +117,6 @@ export class SdToggleButton {
             }
         };
     }
-    static get states() {
-        return {
-            "isActive": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "change",

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

@@ -0,0 +1 @@
+export const TABLE_ID_ATTR = 'table-id';

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

@@ -1,46 +1,84 @@
-.sd-table__wrapper {
+sd-table,
+:host {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+sd-table *,
+:host * {
+  box-sizing: border-box;
+}
+
+.sd-table__container {
   height: var(--table-height, auto);
   width: var(--table-width, 100%);
+  max-width: 100%;
+  min-width: 0;
   color: #222222;
+  display: flex;
+  flex-direction: column;
+}
+
+.sd-table__clip {
+  width: 100%;
+  min-width: 0;
+  height: var(--table-container-height, 400px);
+  border: 1px solid #E1E1E1;
+  border-radius: 8px;
+  overflow: hidden;
 }
-.sd-table__wrapper .sd-table__container {
+.sd-table__clip--has-pagination {
+  border-radius: 8px 8px 0 0;
+}
+
+.sd-table__wrapper {
   width: 100%;
-  height: var(--table-container-height, auto);
+  height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
-  border: 1px solid #E1E1E1;
-  border-radius: 8px;
   font-size: 12px;
-  overflow: hidden;
+  overflow: auto;
   background: #FFFFFF;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle {
-  overflow: auto;
-  will-change: scroll-position;
-  min-height: var(--table-container-height, auto);
+.sd-table__wrapper--loading {
+  overflow: hidden !important;
+  pointer-events: none;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable {
-  height: var(--table-container-height, auto);
+.sd-table__wrapper--no-data {
+  overflow: hidden;
+  pointer-events: none;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle--loading {
-  overflow: hidden !important;
+
+.sd-table__no-data {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #888888;
   pointer-events: none;
+  z-index: 200;
+  background: rgba(255, 255, 255, 0.6);
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner {
+
+.sd-table__loading {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: var(--table-container-height, 100%);
-  min-height: var(--table-container-height, 100%);
+  height: 100%;
   background: rgba(255, 255, 255, 0.6);
   z-index: 200;
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table {
+
+.sd-table {
   background-color: white;
   display: table;
   width: 100%;
@@ -48,197 +86,35 @@
   border-spacing: 0;
   table-layout: fixed;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll {
-  position: relative;
-  height: var(--total-virtual-height, --table-container-height, auto);
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]) {
-  width: 100%;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true] {
-  padding: 0;
-  border: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td {
-  display: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected {
-  position: relative;
-  width: 52px !important;
-  max-width: 52px !important;
-  min-width: 52px !important;
-  padding: 0 10px 0 24px;
-  text-align: left;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label {
-  position: relative;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before {
-  content: "";
-  position: absolute;
-  inset: -6px;
+.sd-table--selectable sd-thead,
+.sd-table--selectable sd-tbody {
+  --selectable: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead {
+.sd-table--sticky-header sd-thead thead {
   position: sticky;
   top: 0;
   z-index: 120;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
-  position: sticky;
-  background-color: #F5FAFF;
-  z-index: 110 !important;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
-  position: sticky;
-  background-color: white;
-  z-index: 100 !important;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
-  left: var(--sticky-left-offset, 0);
+.sd-table--sticky-column sd-thead,
+.sd-table--sticky-column sd-tbody {
+  --sticky-column: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
-  right: var(--sticky-right-offset, 0);
+.sd-table--scrolled-left sd-thead,
+.sd-table--scrolled-left sd-tbody {
+  --scrolled-left: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
-  position: sticky;
-  z-index: 102;
-  background-color: #F5FAFF;
+.sd-table--scrolled-right sd-thead,
+.sd-table--scrolled-right sd-tbody {
+  --scrolled-right: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
-  position: sticky;
-  z-index: 101;
-  background-color: white;
+.sd-table--resizable sd-thead {
+  --resizable: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
-  overflow: visible;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 100%;
-  right: -20px;
-  width: 20px;
-  height: 100%;
-  z-index: 101 !important;
-  box-shadow: inset 12px 0 20px -25px;
-  opacity: 1;
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
-  overflow: visible;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -20px;
-  width: 20px;
-  height: 100%;
-  z-index: 101 !important;
-  box-shadow: inset -12px 0 20px -25px;
-  opacity: 1;
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead {
+.sd-table--no-data sd-thead {
   opacity: 0.4;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th {
-  border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead {
-  height: 36px;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr {
-  width: 100%;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th {
-  background: #F5FAFF;
-  height: 36px;
-  padding: 0 16px;
-  font-weight: 500;
-  vertical-align: middle;
-  border-bottom: 1px solid #E1E1E1;
-  -webkit-user-select: none;
-  user-select: none;
-  position: relative;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 4px;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left {
-  justify-content: flex-start;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center {
-  justify-content: center;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right {
-  justify-content: flex-end;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 16px;
-  cursor: col-resize;
-  z-index: 3;
-  border-left: 1px solid #CCCCCC;
-  border-right: 1px solid #CCCCCC;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
-  height: 44px;
-  padding: 0 16px;
-  border-bottom: 1px solid #E1E1E1;
-  background: white;
-  vertical-align: middle;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left {
-  text-align: left;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center {
-  text-align: center;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right {
-  text-align: right;
-}
-.sd-table__wrapper .sd-table__container .sd-table__bottom {
-  background: transparent;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-height: 240px;
-  translate: 0 -10%;
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data {
-  font-size: 12px;
-  color: #888888;
-}
-.sd-table__wrapper .sd-table__pagination {
+
+.sd-table__pagination {
   position: relative;
   background: #F9F9F9;
   height: 48px;
@@ -247,59 +123,11 @@
   justify-content: center;
   border: 1px solid #E1E1E1;
   border-top: none;
-  border-radius: 8px;
+  border-radius: 0 0 8px 8px;
 }
-.sd-table__wrapper .sd-table__pagination sd-select {
+.sd-table__pagination sd-select-v2 {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
-}
-.sd-table__wrapper .sd-table__virtual-spacer,
-.sd-table__wrapper .sd-table__virtual-row-spacer {
-  padding: 0 !important;
-}
-.sd-table__wrapper .sd-table__virtual-spacer td,
-.sd-table__wrapper .sd-table__virtual-row-spacer td {
-  padding: 0 !important;
-  border: none;
-}
-.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,
-.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton {
-  width: 100%;
-  height: 100%;
-  background-image: repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));
-  background-size: 100% 200%;
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-  position: relative;
-}
-.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,
-.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #E1E1E1 calc(var(--row-height, 44px) - 1px), #E1E1E1 var(--row-height, 44px));
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__skeleton-cell {
-  width: 100%;
-  height: 20px;
-  background: linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-  border-radius: 4px;
-}
-@keyframes skeleton-loading {
-  0% {
-    background-position: 0% 0%;
-  }
-  50% {
-    background-position: 100% 100%;
-  }
-  100% {
-    background-position: 0% 0%;
-  }
 }