@sellmate/design-system 0.0.52 → 0.0.54

package/dist/esm/sd-tbody_3.entry.js

@@ -1,40 +1,40 @@
-import { r as registerInstance, h, H as Host } from './index-ClyGLKUd.js';
+import { r as registerInstance, h, H as Host } from './index-7X2nzJWz.js';
 
-const sdTbodyCss = "sd-tbody{display:table-row-group}";
+const sdTbodyCss = () => `sd-tbody{display:table-row-group}`;
 
 const SdTbody = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'aa5030bb9713c355685de66e15db8b702744c0bc' }, h("slot", { key: '2bfed556b78fc92f8f6b4c574f976a7f0a3c36a8' })));
+        return (h(Host, { key: '7636f7ff23e8aa3c83ace885c5f2ad3fa1e57a45' }, h("slot", { key: '9cdae57011b78e861dab1c16144642c534aaa9e4' })));
     }
 };
-SdTbody.style = sdTbodyCss;
+SdTbody.style = sdTbodyCss();
 
-const sdThCss = "sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}";
+const sdThCss = () => `sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}`;
 
 const SdTh = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a9adef2bdfd7dd0a52a55fffb40db6511db5747e', role: "columnheader" }, h("slot", { key: 'd4af30df5d6a4a9140a9d10e0f3948de088f8c18' })));
+        return (h(Host, { key: '8b511af45184973c4daefe8bee11130934ef05be', role: "columnheader" }, h("slot", { key: 'a72bff519a60499357ccce741fa0b90cdf9197b7' })));
     }
 };
-SdTh.style = sdThCss;
+SdTh.style = sdThCss();
 
-const sdTrCss = "sd-tr{display:table-row}";
+const sdTrCss = () => `sd-tr{display:table-row}`;
 
 const SdTr = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '18a0e95b7264b495bd15aeb7c3a704dac938e140', role: "row" }, h("slot", { key: '83ac4ded200f5e7b18a01d2055859e1093e34d6c' })));
+        return (h(Host, { key: '45ae0547de2437e9b815e0ed33226276787805f7', role: "row" }, h("slot", { key: '98dabd2288d0db28bc9305f1b1b3298cb2a905d0' })));
     }
 };
-SdTr.style = sdTrCss;
+SdTr.style = sdTrCss();
 
 export { SdTbody as sd_tbody, SdTh as sd_th, SdTr as sd_tr };
 //# sourceMappingURL=sd-tbody.sd-th.sd-tr.entry.js.map

package/dist/esm/sd-td.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-ClyGLKUd.js';
+import { r as registerInstance, h, H as Host } from './index-7X2nzJWz.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 = class {
     constructor(hostRef) {
@@ -11,14 +11,14 @@ const SdTd = class {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '6459518995f28a8138b3f669876c90dd24e610c2', role: "cell", class: {
+        return (h(Host, { key: '96933d25aa2342e56aaad5a447840bf51b0af078', 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: 'd6a500857bfc914b0443c5ced9607e15dc151c7c' })));
     }
 };
-SdTd.style = sdTdCss;
+SdTd.style = sdTdCss();
 
 export { SdTd as sd_td };
 //# sourceMappingURL=sd-td.entry.js.map

package/dist/esm/sd-td.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-td.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,iJAAiJ;;MCMpJ,IAAI,GAAA,MAAA;;;;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;;;;;;;"}
+{"version":3,"file":"sd-td.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,+IAA+I,CAAC;;MCM1J,IAAI,GAAA,MAAA;;;;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;;;;;;;"}

package/dist/esm/{tooltipArrow-BwO7_hdW.js → tooltipArrow-DFRZWz6D.js}

@@ -1,8 +1,8 @@
-import { h } from './index-ClyGLKUd.js';
+import { h } from './index-7X2nzJWz.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 
 export { TooltipArrow as T };
-//# sourceMappingURL=tooltipArrow-BwO7_hdW.js.map
+//# sourceMappingURL=tooltipArrow-DFRZWz6D.js.map
 
-//# sourceMappingURL=tooltipArrow-BwO7_hdW.js.map
+//# sourceMappingURL=tooltipArrow-DFRZWz6D.js.map

package/dist/esm/{tooltipArrow-BwO7_hdW.js.map → tooltipArrow-DFRZWz6D.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tooltipArrow-BwO7_hdW.js","sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\r\n\r\nexport const TooltipArrow = (props: SVGProps) => (\r\n <svg\r\n  width=\"16\"\r\n  height=\"12\"\r\n  viewBox=\"0 0 16 12\"\r\n  fill=\"none\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  {...props}\r\n >\r\n  <path\r\n   d=\"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z\"\r\n   fill=\"currentColor\"\r\n  />\r\n </svg>\r\n);\r\n"],"names":[],"mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3C,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAET,CACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;"}
+{"version":3,"file":"tooltipArrow-DFRZWz6D.js","sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\r\n\r\nexport const TooltipArrow = (props: SVGProps) => (\r\n <svg\r\n  width=\"16\"\r\n  height=\"12\"\r\n  viewBox=\"0 0 16 12\"\r\n  fill=\"none\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  {...props}\r\n >\r\n  <path\r\n   d=\"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z\"\r\n   fill=\"currentColor\"\r\n  />\r\n </svg>\r\n);\r\n"],"names":[],"mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3C,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAET,CACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;"}

package/dist/types/components/sd-file-picker/sd-file-picker.d.ts

@@ -0,0 +1,29 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class SdFilePicker implements ComponentInterface {
+    el: HTMLElement;
+    value?: File[] | File | null;
+    placeholder: string;
+    disabled: boolean;
+    inline: boolean;
+    multiple: boolean;
+    accept?: string;
+    width?: number | string;
+    private internalValue;
+    private hovered;
+    private showTooltip;
+    private fileInputRef?;
+    private fileNamesRef?;
+    sdChange: EventEmitter<File[] | File | null>;
+    valueChanged(newValue: File[] | File | null): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private handleFileChange;
+    private handleClear;
+    private handleClick;
+    private getStatusClass;
+    private hasFiles;
+    private getDisplayText;
+    private checkOverflow;
+    private getIconColor;
+    render(): any;
+}

package/dist/types/components/sd-number-input/sd-number-input.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class SdNumberInput {
+    el: HTMLElement;
+    min: number;
+    max: number;
+    step: number;
+    useButton: boolean;
+    useDecimal: boolean;
+    value?: string | number | null;
+    label?: string;
+    placeholder: string;
+    disabled: boolean;
+    width?: number | string;
+    rules?: Array<(value: string | number | null) => boolean | string>;
+    autoFocus: boolean;
+    status?: 'default' | 'pass' | 'error';
+    inputClass: string;
+    readonly: boolean;
+    inputStyle: {
+        [key: string]: string;
+    };
+    private internalValue;
+    private displayValue;
+    private hovered;
+    private error;
+    private nativeEl;
+    sdIncrement?: EventEmitter<{
+        currentVal: number;
+        prevVal: number;
+    }>;
+    sdDecrement?: EventEmitter<{
+        currentVal: number;
+        prevVal: number;
+    }>;
+    sdInput?: EventEmitter<number | null>;
+    sdChange?: EventEmitter<number | null>;
+    sdFocus?: EventEmitter<Event>;
+    sdBlur?: EventEmitter<Event>;
+    private formatWithCommas;
+    private parseInput;
+    private clampMinMax;
+    private updateDisplay;
+    private isIncrementDisabled;
+    private isDecrementDisabled;
+    valueChanged(newValue: string | number | null): void;
+    internalValueChanged(newValue: number | null): void;
+    componentWillLoad(): void;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+    private handleIncrement;
+    private handleDecrement;
+    getNativeElement(): Promise<HTMLInputElement | null>;
+    getInputStatus(): string;
+    render(): any;
+}

package/dist/types/components/sd-radio-button-group/sd-radio-button-group.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type RadioValue = string | number | boolean;
+export type RadioOption = {
+    label: string;
+    value: RadioValue;
+    disabled?: boolean;
+};
+export declare class SdRadioButtonGroup {
+    value: RadioValue;
+    radioOptions: RadioOption[];
+    size: 'sm' | 'md';
+    disabled: boolean;
+    name?: string;
+    private selectedValue;
+    sdChange: EventEmitter<RadioValue>;
+    componentWillLoad(): void;
+    valueChanged(newValue: RadioValue): void;
+    private handleRadioChange;
+    private isOptionSelected;
+    private isOptionDisabled;
+    private getButtonClasses;
+    private getGroupClasses;
+    render(): any;
+}

package/dist/types/components/sd-select/sd-select.d.ts

@@ -63,6 +63,7 @@ export declare class SdSelect extends BaseDropdownEvent {
     private searchRef?;
     private optionRef?;
     private dropdownRef?;
+    open(): Promise<void>;
     valueChanged(): void;
     optionsChanged(): void;
     searchTextChanged(): void;

package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts

@@ -26,6 +26,7 @@ export declare class SdSelectMultiple extends BaseDropdownEvent {
     private searchRef?;
     private optionRef?;
     private dropdownRef?;
+    open(): Promise<void>;
     valueChanged(): void;
     optionsChanged(): void;
     searchTextChanged(): void;

package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts

@@ -32,6 +32,7 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     searchText: string | null;
     itemIndex: number;
     isScrolled: boolean;
+    isDropdownReady: boolean;
     sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;
     dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;
     private selectRef?;
@@ -43,6 +44,7 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     searchTextChanged(): void;
     itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
     isOpenChanged(): Promise<void>;
+    open(): Promise<void>;
     componentWillLoad(): void;
     disconnectedCallback(): void;
     protected handleDocumentClick(event: Event): void;

package/dist/types/components/sd-tabs/sd-tabs.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type TabOption = {
+    label: string;
+    value: string;
+    badge?: string | number;
+};
+export declare class SdTabs {
+    value: string;
+    tabs: TabOption[];
+    size: 'sm' | 'md';
+    isSub: boolean;
+    private selectedValue;
+    sdChange: EventEmitter<string>;
+    componentWillLoad(): void;
+    valueChanged(newValue: string): void;
+    private handleTabClick;
+    private isTabSelected;
+    private getTabClasses;
+    private getContainerClasses;
+    private getBadgeColors;
+    render(): any;
+}

package/dist/types/components/sd-toast-message/sd-toast-message.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ToastType = 'basicLight' | 'basicDark' | 'error' | 'caution' | 'complete' | 'progress';
+export declare class SdToastMessage {
+    icon?: IconName;
+    message: string;
+    link?: string;
+    linkLabel?: string;
+    buttonLabel?: string;
+    close: boolean;
+    type: ToastType;
+    sdClose: EventEmitter<void>;
+    sdButtonClick: EventEmitter<void>;
+    private isVisible;
+    private static readonly COLOR_OF_TYPE;
+    private handleClose;
+    private handleButtonClick;
+    private getContainerClasses;
+    render(): any;
+}

package/dist/types/components/sd-toggle-button/sd-toggle-button.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class SdToggleButton {
+    value: boolean;
+    label: string;
+    disabled: boolean;
+    private isActive;
+    sdChange: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    private updateActiveState;
+    private get buttonClasses();
+    private handleChange;
+    render(): any;
+}