@sellmate/design-system 0.0.0 → 0.0.2

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

@@ -0,0 +1,218 @@
+import { Host, h } from "@stencil/core";
+import colors from "../../styles/color.json";
+export class SdGuide {
+    el;
+    type = 'help';
+    popupTitle = '';
+    message = '';
+    guideUrl = '';
+    popupWidth;
+    popupShow = false;
+    guideRef;
+    static guideTitle = {
+        help: '활용 Tip',
+        pdf: 'PDF Guide',
+        youtube: 'Video Guide',
+        notion: '사용 가이드',
+        event: 'Event Button',
+    };
+    handleClickGuide = () => {
+        if (this.type === 'help') {
+            this.popupShow = !this.popupShow;
+            return;
+        }
+        if (this.guideUrl) {
+            window.open(this.guideUrl, '_blank');
+        }
+    };
+    getGuideClasses() {
+        const classes = ['sd-guide'];
+        classes.push(`sd-guide--${this.type}`);
+        if (this.popupShow)
+            classes.push('sd-guide--active');
+        return classes.join(' ');
+    }
+    getGuideStyle() {
+        const styles = {};
+        if (this.type === 'help') {
+            styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;
+            styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;
+            styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;
+        }
+        else {
+            styles['--guide-border'] = colors.grey_45;
+            styles['--guide-color'] = colors.grey_90;
+            styles['--guide-background'] = colors.white;
+        }
+        return styles;
+    }
+    getGuidIcon() {
+        if (this.type === 'pdf') {
+            return { name: 'pdf', size: 20, color: colors.red_75 };
+        }
+        else if (this.type === 'youtube') {
+            return { name: 'youtube', size: 20, color: colors.red_75 };
+        }
+        else if (this.type === 'notion') {
+            return { name: 'notion', size: 16, color: colors.black };
+        }
+        else if (this.type === 'event') {
+            return { name: 'event', size: 16, color: colors.brilliantblue_70 };
+        }
+        return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };
+    }
+    closeDropdown = () => {
+        this.popupShow = false;
+    };
+    render() {
+        const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
+        return (h(Host, { key: '4313417f5c41f1126e329bddd46d75f2f571bcbe', style: this.getGuideStyle() }, h("sd-button", { key: 'b7ba861de4752828dd7b8747d26b4a8549a409a8', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
+                height: '28px',
+                minHeight: '28px',
+                padding: '4px 12px',
+                borderRadius: '16px',
+                borderColor: 'var(--guide-border)',
+                color: 'var(--guide-color)',
+                fontSize: '12px',
+                fontWeight: '400',
+                backgroundColor: 'var(--guide-background)',
+            }, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '31c52e9aef405c536dfd1a9da8d59450dbf179cf', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: 'b4798202e35dcd232ce66eb6b939b57993d8de6a', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '9aa1f1d5e3bb224f606bb204754843e5cd8f5622', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), h("div", { key: '87322cfaaced49ba6da7a9aa648eeed7403f88ca', class: "sd-guide__popup__header" }, h("sd-icon", { key: '231f23a8ceb669a39bd89c2054848f82edafd344', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'c4dec3314abeb04d7b71962d76c8191c26332e7c', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: '3c19dc7e2b14e29b3079d34e88e52230c1a16911', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+    }
+    // 현재 2depth까지만 스타일 적용
+    renderListItem(message, depth = 0) {
+        const listItems = [];
+        if (Array.isArray(message)) {
+            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
+            listItems.push(...depthMsg.flat());
+        }
+        else {
+            listItems.push(this.renderLi(message, depth));
+        }
+        return listItems;
+    }
+    renderLi = (message, depth) => {
+        const listContent = message.replace(/ /gi, ' ');
+        return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: listContent })));
+    };
+    static get is() { return "sd-guide"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-guide.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-guide.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'help' | 'pdf' | 'youtube' | 'notion' | 'event'",
+                    "resolved": "\"event\" | \"help\" | \"notion\" | \"pdf\" | \"youtube\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'help'"
+            },
+            "popupTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-title",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "guideUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "guide-url",
+                "defaultValue": "''"
+            },
+            "popupWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-width"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "popupShow": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=sd-guide.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: 'help' | 'pdf' | 'youtube' | 'notion' | 'event' = 'help';\r\n @Prop() popupTitle: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n static guideTitle = {\r\n  help: '활용 Tip',\r\n  pdf: 'PDF Guide',\r\n  youtube: 'Video Guide',\r\n  notion: '사용 가이드',\r\n  event: 'Event Button',\r\n };\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private getGuideClasses(): string {\r\n  const classes = ['sd-guide'];\r\n\r\n  classes.push(`sd-guide--${this.type}`);\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGuideStyle(): StyleProps {\r\n  const styles: StyleProps = {};\r\n\r\n  if (this.type === 'help') {\r\n   styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;\r\n   styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;\r\n   styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;\r\n  } else {\r\n   styles['--guide-border'] = colors.grey_45;\r\n   styles['--guide-color'] = colors.grey_90;\r\n   styles['--guide-background'] = colors.white;\r\n  }\r\n\r\n  return styles;\r\n }\r\n\r\n private getGuidIcon(): { name: IconName; size: number; color: string } {\r\n  if (this.type === 'pdf') {\r\n   return { name: 'pdf', size: 20, color: colors.red_75 };\r\n  } else if (this.type === 'youtube') {\r\n   return { name: 'youtube', size: 20, color: colors.red_75 };\r\n  } else if (this.type === 'notion') {\r\n   return { name: 'notion', size: 16, color: colors.black };\r\n  } else if (this.type === 'event') {\r\n   return { name: 'event', size: 16, color: colors.brilliantblue_70 };\r\n  }\r\n\r\n  return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };\r\n }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();\r\n\r\n  return (\r\n   <Host style={this.getGuideStyle()}>\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.getGuideClasses()}\r\n     variant=\"outline\"\r\n     label={SdGuide.guideTitle[this.type]}\r\n     size=\"md\"\r\n     color=\"var(--guide-color)\"\r\n     icon={iconName}\r\n     iconColor={iconColor}\r\n     iconSize={iconSize}\r\n     iconStyle={{ marginRight: '4px' }}\r\n     buttonStyle={{\r\n      height: '28px',\r\n      minHeight: '28px',\r\n      padding: '4px 12px',\r\n      borderRadius: '16px',\r\n      borderColor: 'var(--guide-border)',\r\n      color: 'var(--guide-color)',\r\n      fontSize: '12px',\r\n      fontWeight: '400',\r\n      backgroundColor: 'var(--guide-background)',\r\n     }}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 24]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.popupTitle || SdGuide.guideTitle[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n"]}

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { Icons } from "../assets/index";
+import { resolveColor } from "../../utils/color";
 export class SdIcon {
     /** 아이콘명 */
     name;
@@ -11,6 +12,7 @@ export class SdIcon {
     rotate;
     /** 접근성을 위한 라벨 */
     label;
+    iconStyle = {};
     getIconClasses() {
         const classes = ['sd-icon'];
         if (this.rotate) {
@@ -18,9 +20,12 @@ export class SdIcon {
         }
         return classes.join(' ');
     }
+    get resolvedColor() {
+        return resolveColor(this.color);
+    }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '22187dcae433b8061e080f97eb9c798a097ae10f', class: this.getIconClasses() }, h(IconComponent, { key: '0eb660cb7d46855cf4e054d33be4f2b964c3de24', color: this.color })));
+        return (h("i", { key: 'e4a18e5410daf717d400488c1d68f1dd20017e71', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '1300823f018f8f63a23b9caf1529beafb0b3583c', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get encapsulation() { return "scoped"; }
@@ -41,7 +46,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"helpOutline\" | \"pageMove\" | \"search\"",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -136,6 +141,29 @@ export class SdIcon {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "iconStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StyleProps",
+                    "resolved": "{ [key: string]: any; }",
+                    "references": {
+                        "StyleProps": {
+                            "location": "global",
+                            "id": "global::StyleProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sd-icon.js","sourceRoot":"","sources":["../../../src/components/sd-icon/sd-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAOxC,MAAM,OAAO,MAAM;IAClB,WAAW;IACH,IAAI,CAAY;IAExB,aAAa;IACL,IAAI,GAAoB,EAAE,CAAC;IAEnC,aAAa;IACL,KAAK,CAAU;IAEvB,8BAA8B;IACtB,MAAM,CAAsB;IAEpC,iBAAiB;IACT,KAAK,CAAU;IAEf,cAAc;QACrB,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;QAE5B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAChD,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACL,MAAM,aAAa,GAAI,KAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7D,OAAO,CACN,0DAAG,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC9B,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CACjC,CACJ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\r\nimport { Icons } from '../assets/index';\r\n\r\n@Component({\r\n tag: 'sd-icon',\r\n styleUrl: 'sd-icon.scss',\r\n scoped: true,\r\n})\r\nexport class SdIcon {\r\n /** 아이콘명 */\r\n @Prop() name!: IconName;\r\n\r\n /** 아이콘 크기 */\r\n @Prop() size: number | string = 12;\r\n\r\n /** 아이콘 색상 */\r\n @Prop() color?: string;\r\n\r\n /** 회전 각도 (0, 90, 180, 270) */\r\n @Prop() rotate?: 0 | 90 | 180 | 270;\r\n\r\n /** 접근성을 위한 라벨 */\r\n @Prop() label?: string;\r\n\r\n private getIconClasses(): string {\r\n  const classes = ['sd-icon'];\r\n\r\n  if (this.rotate) {\r\n   classes.push(`sd-icon--rotate-${this.rotate}`);\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const IconComponent = (Icons as any)[this.name]?.[this.size];\r\n\r\n  return (\r\n   <i class={this.getIconClasses()}>\r\n    <IconComponent color={this.color} />\r\n   </i>\r\n  );\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-icon.js","sourceRoot":"","sources":["../../../src/components/sd-icon/sd-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,OAAO,MAAM;IAClB,WAAW;IACH,IAAI,CAAY;IAExB,aAAa;IACL,IAAI,GAAoB,EAAE,CAAC;IAEnC,aAAa;IACL,KAAK,CAAU;IAEvB,8BAA8B;IACtB,MAAM,CAAsB;IAEpC,iBAAiB;IACT,KAAK,CAAU;IAEf,SAAS,GAAe,EAAE,CAAC;IAE3B,cAAc;QACrB,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;QAE5B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAChD,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,IAAY,aAAa;QACxB,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACL,MAAM,aAAa,GAAI,KAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7D,OAAO,CACN,0DAAG,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS;YACrD,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACzC,CACJ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\r\nimport { Icons } from '../assets/index';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\n@Component({\r\n tag: 'sd-icon',\r\n styleUrl: 'sd-icon.scss',\r\n scoped: true,\r\n})\r\nexport class SdIcon {\r\n /** 아이콘명 */\r\n @Prop() name!: IconName;\r\n\r\n /** 아이콘 크기 */\r\n @Prop() size: number | string = 12;\r\n\r\n /** 아이콘 색상 */\r\n @Prop() color?: string;\r\n\r\n /** 회전 각도 (0, 90, 180, 270) */\r\n @Prop() rotate?: 0 | 90 | 180 | 270;\r\n\r\n /** 접근성을 위한 라벨 */\r\n @Prop() label?: string;\r\n\r\n @Prop() iconStyle: StyleProps = {};\r\n\r\n private getIconClasses(): string {\r\n  const classes = ['sd-icon'];\r\n\r\n  if (this.rotate) {\r\n   classes.push(`sd-icon--rotate-${this.rotate}`);\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private get resolvedColor(): string {\r\n  return resolveColor(this.color);\r\n }\r\n\r\n render() {\r\n  const IconComponent = (Icons as any)[this.name]?.[this.size];\r\n\r\n  return (\r\n   <i class={this.getIconClasses()} style={this.iconStyle}>\r\n    <IconComponent color={this.resolvedColor} />\r\n   </i>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: 'fa343c7e8ef9913c1afb641967988743561c612a', style: inputWidth }, this.label && h("div", { key: 'ad1220351663e6ad454c4a5294f9e2022003c120', class: "sd-input__label" }, this.label), h("label", { key: '2ce9645a317d709988aeb81eb6a7d8db479cd5dd', class: {
+        return (h(Host, { key: 'd3d47bbc1d893415b3c04575abb474447b61c9cc', style: inputWidth }, this.label && h("div", { key: '80b9b4e3d39956b9582d7cd6cf1fa7558c2fa400', class: "sd-input__label" }, this.label), h("label", { key: '6a39cf5d0218196c2acf946995f0992abc1b1fdc', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '7b9780262267abf2872fd12b2a4124d90c3b6e4a', name: "prefix" }), h("input", { key: '3e07dfd3ba2ea08bce7e981d70c2cabd4bc3f42f', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '98cad28b73f6b9b9d84656d47a14ed7468ae8824', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '560ec33b375822cf88e29d759eb54176e0c5a593', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '64b0e848cb47fb226f72fe49a11e8743b01d73f0', name: "prefix" }), h("input", { key: '9d2a3b64cf708859b2612a67e54fff2e0978d3c4', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '40788d6c7294cacb0849a4ba6a0d4e3616e69c3a', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '5b407126127593c49a277b7461c912bed02073be', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

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

@@ -73,12 +73,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'bfdf84cf7017a8c03818b49e37910600d054a6a4', class: this.paginationClasses }, h("div", { key: '941b419069a4e510c4eba45a5615960b7bce091b', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '21ac7d547e0a2ebc9bc285f3561278d373a70560', class: this.paginationClasses }, h("div", { key: 'b2e1dee06d5a3751d395fef397f9fd745a49b598', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2e6b8a0c9be36763c5ca3d040400a4e88bfc8d44', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '714367c37a7db25e5aadd00bb4ca102578d224bf', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '7eaf12e3cf5530093c0357bd928d956442ffb16c' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '2ba62338919c55d4a94276441987a166a14bff32', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '6f0da4c5d3924d37a4e8d36623fae620bdeb9ca1', class: {
+        return (h(Fragment, { key: 'd9ce7f31132bea70b2ff39bb6660053030ee2b5e' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '85bfde26c1020ab51e36d33ad427135d0fb98a80', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'd273fc2d701b6f3ab9328cccb000c00317738eb5', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'b011af453bd14103d820b58d2774313d5e9855d6', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'eb94e11a4e760bae02cd55c7e77cc73344ae345c' })), h("div", { key: 'a088dc687074decb819d066b39a465879dfae3f9', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '30c845a1b50a9237f6a7f685cd65aa4211fbf82b', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd1c94716035cd7a1349e4249f2f4042c53091f3f', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '898eab4ec36a330b530a283e97238d89d52a23c6', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '08241065cbbc872c3b29dc90a4d55e37588fc0ec', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '2b011d6fb9c0b58e43fa136ff5e1c01e98848ec7', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'f9740977811bfd4f2b171e74482a3c7e71aebb06', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'c261ab4805baf022ca6dbab05c947ada6aa26db2' })), h("div", { key: '962f6cbcada06ebaad1083126573e2255665513d', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '0d39ddeaf9bbf1a59f35b02b6eb572c625ad7bf6', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '2ba5d4b5fafc792cc3095cb378f88a257a048a99', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '9b883a14a83f53e30fdc6f2a41a8f3741911d9bc', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '58d3669781fbdae03bfb6c9564e7d81a9d74cdf4', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '4cd92022824f8cc453181dccc50b4e591b312117', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -116,7 +116,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"helpOutline\" | \"pageMove\" | \"search\"",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -92,7 +92,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'f8c0b220e951cbc2a92d582f13d52ed8bec37835' });
+        return h("slot", { key: '32b0689ed1ad8c20bc400292b63597bc3e56ce2b' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: 'cd4584964378612508ce0dda478f26d7e1a4bc78', class: {
+        return (h("div", { key: 'afd8da214335c6ea6036a51c617b2b35df104f69', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -1393,11 +1393,11 @@ textarea {
 .sd-table__container .sd-table__middle {
   overflow: auto;
   will-change: scroll-position;
-  height: 100%;
+  height: var(--table-height, auto);
 }
 .sd-table__container .sd-table__middle .sd-table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
 }
@@ -1414,6 +1414,69 @@ textarea {
   top: 0;
   z-index: 2;
 }
+.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
+.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
+  position: sticky;
+  background-color: #f5faff;
+  z-index: 200 !important;
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
+.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
+  position: sticky;
+  background-color: white;
+  z-index: 100 !important;
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
+  left: var(--sticky-left-offset, 0);
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
+  right: var(--sticky-right-offset, 0);
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
+  position: sticky;
+  z-index: 102;
+  background-color: #f5faff;
+}
+.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
+  position: sticky;
+  z-index: 101;
+  background-color: white;
+}
+.sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
+.sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
+  overflow: visible;
+}
+.sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
+.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__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
+.sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
+  overflow: visible;
+}
+.sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
+.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__container .sd-table__middle .sd-table--no-data thead {
   opacity: 0.4;
 }