@sellmate/design-system 1.8.0 → 1.10.0

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

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Rule } from '../../types/form';
+import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
+import { type ChipInputSize } from './sd-chip-input.config';
+export declare class SdChipInput {
+    host: HTMLElement;
+    values: string[];
+    errors: boolean[] | ((value: string) => boolean);
+    size: ChipInputSize;
+    disabled: boolean;
+    placeholder: string;
+    name: string;
+    rules?: Rule[];
+    error: boolean;
+    useReset: boolean;
+    label?: string;
+    labelWidth: string | number;
+    hint: string;
+    errorMessage: string;
+    width: string | number;
+    status?: 'default' | 'pass' | 'error';
+    icon?: IconProps;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
+    private internalValues;
+    private internalErrors;
+    private focused;
+    private hovered;
+    private inputValue;
+    private inputEl?;
+    private formField?;
+    get value(): string[];
+    valuesChanged(newValues: string[]): void;
+    errorsChanged(newErrors: boolean[] | ((value: string) => boolean)): void;
+    componentWillLoad(): void;
+    private getChipError;
+    update: EventEmitter<string[]>;
+    focusEvent: EventEmitter<void>;
+    blurEvent: EventEmitter<void>;
+    sdValidate(): Promise<boolean | undefined>;
+    sdReset(): Promise<void | undefined>;
+    sdResetValidate(): Promise<void | undefined>;
+    sdFocus(): Promise<void | undefined>;
+    private handleChipUpdate;
+    private handleChipRemove;
+    private handleKeyDown;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleContainerClick;
+    private handleResetInput;
+    render(): any;
+}

package/dist/types/components/sd-date-picker/sd-date-picker.config.d.ts

@@ -26,8 +26,8 @@ export declare const DATEPICKER_COLORS: {
         disabled: string;
     };
     text: {
-        default: string;
         hint: string;
+        default: string;
         disabled: string;
     };
 };

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts

@@ -24,7 +24,15 @@ export declare const PRESET_HOVER_BACKGROUNDS: {
     readonly danger: string;
     readonly danger_outline: string;
 };
-export declare const PRESET_CONTENT_COLORS: {
+export declare const PRESET_TEXT_COLORS: {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly primary_outline: string;
+    readonly neutral_outline: string;
+    readonly danger: string;
+    readonly danger_outline: string;
+};
+export declare const PRESET_ICON_COLORS: {
     readonly primary: string;
     readonly secondary: string;
     readonly primary_outline: string;

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

@@ -5,6 +5,7 @@ export declare class SdGhostButton {
     size: GhostButtonSize;
     intent: GhostButtonIntent;
     ariaLabel: string;
+    tooltipLabel: string;
     disabled: boolean;
     click: EventEmitter<MouseEvent>;
     private hasWarnedMissingAriaLabel;

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

@@ -25,8 +25,6 @@ export declare const INPUT_COLORS: {
         default: string;
         placeholder: string;
         disabled: string;
-        hint: string;
-        errorMessage: string;
     };
     icon: {
         default: string;

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

@@ -43,7 +43,6 @@ export declare const NUMBER_INPUT_STEPPER: {
     };
 };
 export declare const NUMBER_INPUT_HINT: {
-    color: string;
     typography: {
         fontFamily: string;
         fontWeight: string;
@@ -51,9 +50,9 @@ export declare const NUMBER_INPUT_HINT: {
         lineHeight: string;
         textDecoration: string;
     };
+    color: string;
 };
 export declare const NUMBER_INPUT_ERROR_MESSAGE: {
-    color: string;
     typography: {
         fontFamily: string;
         fontWeight: string;
@@ -61,6 +60,7 @@ export declare const NUMBER_INPUT_ERROR_MESSAGE: {
         lineHeight: string;
         textDecoration: string;
     };
+    color: string;
 };
 export declare const NUMBER_INPUT_CONTENTS_GAP: string;
 export declare const NUMBER_INPUT_BORDER_WIDTH: string;

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

@@ -6,7 +6,7 @@ export type PopoverButton = Partial<Pick<SdButton, 'name' | 'icon' | 'rightIcon'
     label: string;
     onClick?: (e: Event) => void;
 };
-export type PopoverLink = Partial<Pick<SdTextLink, 'icon' | 'iconColor' | 'useArrow' | 'underline' | 'disabled'>> & {
+export type PopoverLink = Partial<Pick<SdTextLink, 'icon' | 'iconColor' | 'rightArrow' | 'underline' | 'disabled'>> & {
     label: string;
     onClick?: (e: Event) => void;
 };

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

@@ -93,5 +93,7 @@ export declare const SEARCH_THRESHOLD = 11;
 export declare const SEARCH_DEBOUNCE_MS = 1000;
 export declare const MAX_DROPDOWN_WIDTH = "640px";
 export declare const EMPTY_MESSAGE = "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.";
+export declare function isHtmlLabel(label: string): boolean;
+export declare function extractText(html: string): string;
 export declare function countLeaves(options: SelectOption[]): number;
 export declare function filterTree(options: SelectOption[], keyword: string): SelectOption[];

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

@@ -5,6 +5,7 @@ export declare class SdTabs {
     tabs: TabOption[];
     size: TabSize;
     isSub: boolean;
+    vertical: boolean;
     update: EventEmitter<string>;
     valueChanged(newValue: string): void;
     private handleTabClick;

package/dist/types/components/sd-text-link/sd-text-link.d.ts

@@ -4,7 +4,7 @@ export declare class SdTextLink {
     icon: string;
     iconColor: string;
     labelClass: string;
-    useArrow: boolean;
+    rightArrow: 'none' | 'chevron' | 'caret';
     underline: boolean;
     disabled: boolean;
     click: EventEmitter<void>;

package/dist/types/components/sd-textarea/sd-textarea.config.d.ts

@@ -12,8 +12,6 @@ export declare const TEXTAREA_COLORS: {
         default: string;
         placeholder: string;
         disabled: string;
-        hint: string;
-        errorMessage: string;
     };
     bg: {
         default: string;

package/dist/types/components.d.ts

@@ -15,6 +15,7 @@ import { Event } from "./stencil-public-runtime";
 import { CalendarEventGroup } from "./components/sd-calendar/sd-calendar.config";
 import { CalloutType } from "./components/sd-callout/sd-callout.config";
 import { CheckedType } from "./components/sd-checkbox/sd-checkbox";
+import { ChipInputSize } from "./components/sd-chip-input/sd-chip-input.config";
 import { CircleProgressType } from "./components/sd-circle-progress/sd-circle-progress.config";
 import { ConfirmModalMainButton, ConfirmModalType, TagName } from "./components/sd-confirm-modal/sd-confirm-modal.config";
 import { Type } from "./components/sd-date-box/sd-date-box";
@@ -54,6 +55,7 @@ export { Event } from "./stencil-public-runtime";
 export { CalendarEventGroup } from "./components/sd-calendar/sd-calendar.config";
 export { CalloutType } from "./components/sd-callout/sd-callout.config";
 export { CheckedType } from "./components/sd-checkbox/sd-checkbox";
+export { ChipInputSize } from "./components/sd-chip-input/sd-chip-input.config";
 export { CircleProgressType } from "./components/sd-circle-progress/sd-circle-progress.config";
 export { ConfirmModalMainButton, ConfirmModalType, TagName } from "./components/sd-confirm-modal/sd-confirm-modal.config";
 export { Type } from "./components/sd-date-box/sd-date-box";
@@ -316,6 +318,81 @@ export namespace Components {
          */
         "value": string;
     }
+    interface SdChipInput {
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * @default ''
+         */
+        "errorMessage": string;
+        /**
+          * @default []
+         */
+        "errors": boolean[] | ((value: string) => boolean);
+        /**
+          * @default ''
+         */
+        "hint": string;
+        /**
+          * @default undefined
+         */
+        "icon"?: IconProps;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * @default ''
+         */
+        "labelTooltip": string;
+        /**
+          * @default null
+         */
+        "labelTooltipProps": SdTooltipProps | null;
+        /**
+          * @default ''
+         */
+        "labelWidth": string | number;
+        /**
+          * @default nanoid()
+         */
+        "name": string;
+        /**
+          * @default '입력해 주세요.'
+         */
+        "placeholder": string;
+        /**
+          * @default []
+         */
+        "rules"?: Rule[];
+        "sdFocus": () => Promise<void | undefined>;
+        "sdReset": () => Promise<void | undefined>;
+        "sdResetValidate": () => Promise<void | undefined>;
+        "sdValidate": () => Promise<boolean | undefined>;
+        /**
+          * @default 'sm'
+         */
+        "size": ChipInputSize;
+        "status"?: 'default' | 'pass' | 'error';
+        /**
+          * @default false
+         */
+        "useReset": boolean;
+        /**
+          * @default []
+         */
+        "values": string[];
+        /**
+          * @default ''
+         */
+        "width": string | number;
+    }
     interface SdCircleProgress {
         /**
           * @default false
@@ -836,6 +913,10 @@ export namespace Components {
           * @default 'sm'
          */
         "size": GhostButtonSize;
+        /**
+          * @default ''
+         */
+        "tooltipLabel": string;
     }
     interface SdGuide {
         /**
@@ -1641,6 +1722,10 @@ export namespace Components {
          */
         "tabs": TabOption[];
         "value": string;
+        /**
+          * @default false
+         */
+        "vertical": boolean;
     }
     interface SdTag {
         "icon"?: IconName;
@@ -1705,13 +1790,13 @@ export namespace Components {
          */
         "labelClass": string;
         /**
-          * @default false
+          * @default 'none'
          */
-        "underline": boolean;
+        "rightArrow": 'none' | 'chevron' | 'caret';
         /**
           * @default false
          */
-        "useArrow": boolean;
+        "underline": boolean;
     }
     interface SdTextarea {
         /**
@@ -1983,6 +2068,10 @@ export interface SdChipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdChipElement;
 }
+export interface SdChipInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdChipInputElement;
+}
 export interface SdConfirmModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdConfirmModalElement;
@@ -2255,6 +2344,25 @@ declare global {
         prototype: HTMLSdChipElement;
         new (): HTMLSdChipElement;
     };
+    interface HTMLSdChipInputElementEventMap {
+        "sdUpdate": string[];
+        "sdFocus": void;
+        "sdBlur": void;
+    }
+    interface HTMLSdChipInputElement extends Components.SdChipInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdChipInputElementEventMap>(type: K, listener: (this: HTMLSdChipInputElement, ev: SdChipInputCustomEvent<HTMLSdChipInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdChipInputElementEventMap>(type: K, listener: (this: HTMLSdChipInputElement, ev: SdChipInputCustomEvent<HTMLSdChipInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdChipInputElement: {
+        prototype: HTMLSdChipInputElement;
+        new (): HTMLSdChipInputElement;
+    };
     interface HTMLSdCircleProgressElement extends Components.SdCircleProgress, HTMLStencilElement {
     }
     var HTMLSdCircleProgressElement: {
@@ -2993,6 +3101,7 @@ declare global {
         "sd-card": HTMLSdCardElement;
         "sd-checkbox": HTMLSdCheckboxElement;
         "sd-chip": HTMLSdChipElement;
+        "sd-chip-input": HTMLSdChipInputElement;
         "sd-circle-progress": HTMLSdCircleProgressElement;
         "sd-confirm-modal": HTMLSdConfirmModalElement;
         "sd-date-box": HTMLSdDateBoxElement;
@@ -3284,6 +3393,80 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface SdChipInput {
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * @default ''
+         */
+        "errorMessage"?: string;
+        /**
+          * @default []
+         */
+        "errors"?: boolean[] | ((value: string) => boolean);
+        /**
+          * @default ''
+         */
+        "hint"?: string;
+        /**
+          * @default undefined
+         */
+        "icon"?: IconProps;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * @default ''
+         */
+        "labelTooltip"?: string;
+        /**
+          * @default null
+         */
+        "labelTooltipProps"?: SdTooltipProps | null;
+        /**
+          * @default ''
+         */
+        "labelWidth"?: string | number;
+        /**
+          * @default nanoid()
+         */
+        "name"?: string;
+        "onSdBlur"?: (event: SdChipInputCustomEvent<void>) => void;
+        "onSdFocus"?: (event: SdChipInputCustomEvent<void>) => void;
+        "onSdUpdate"?: (event: SdChipInputCustomEvent<string[]>) => void;
+        /**
+          * @default '입력해 주세요.'
+         */
+        "placeholder"?: string;
+        /**
+          * @default []
+         */
+        "rules"?: Rule[];
+        /**
+          * @default 'sm'
+         */
+        "size"?: ChipInputSize;
+        "status"?: 'default' | 'pass' | 'error';
+        /**
+          * @default false
+         */
+        "useReset"?: boolean;
+        /**
+          * @default []
+         */
+        "values"?: string[];
+        /**
+          * @default ''
+         */
+        "width"?: string | number;
+    }
     interface SdCircleProgress {
         /**
           * @default false
@@ -3808,6 +3991,10 @@ declare namespace LocalJSX {
           * @default 'sm'
          */
         "size"?: GhostButtonSize;
+        /**
+          * @default ''
+         */
+        "tooltipLabel"?: string;
     }
     interface SdGuide {
         /**
@@ -4625,6 +4812,10 @@ declare namespace LocalJSX {
          */
         "tabs"?: TabOption[];
         "value": string;
+        /**
+          * @default false
+         */
+        "vertical"?: boolean;
     }
     interface SdTag {
         "icon"?: IconName;
@@ -4690,13 +4881,13 @@ declare namespace LocalJSX {
         "labelClass"?: string;
         "onSdClick"?: (event: SdTextLinkCustomEvent<void>) => void;
         /**
-          * @default false
+          * @default 'none'
          */
-        "underline"?: boolean;
+        "rightArrow"?: 'none' | 'chevron' | 'caret';
         /**
           * @default false
          */
-        "useArrow"?: boolean;
+        "underline"?: boolean;
     }
     interface SdTextarea {
         /**
@@ -5002,6 +5193,21 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "placeholder": string;
     }
+    interface SdChipInputAttributes {
+        "size": ChipInputSize;
+        "disabled": boolean;
+        "placeholder": string;
+        "name": string;
+        "error": boolean;
+        "useReset": boolean;
+        "label": string;
+        "labelWidth": string;
+        "hint": string;
+        "errorMessage": string;
+        "width": string;
+        "status": 'default' | 'pass' | 'error';
+        "labelTooltip": string;
+    }
     interface SdCircleProgressAttributes {
         "indeterminate": boolean;
         "value": number;
@@ -5134,6 +5340,7 @@ declare namespace LocalJSX {
         "size": GhostButtonSize;
         "intent": GhostButtonIntent;
         "ariaLabel": string;
+        "tooltipLabel": string;
         "disabled": boolean;
     }
     interface SdGuideAttributes {
@@ -5356,6 +5563,7 @@ declare namespace LocalJSX {
         "value": string;
         "size": TabSize;
         "isSub": boolean;
+        "vertical": boolean;
     }
     interface SdTagAttributes {
         "name": TagName;
@@ -5379,7 +5587,7 @@ declare namespace LocalJSX {
         "icon": string;
         "iconColor": string;
         "labelClass": string;
-        "useArrow": boolean;
+        "rightArrow": 'none' | 'chevron' | 'caret';
         "underline": boolean;
         "disabled": boolean;
     }
@@ -5465,6 +5673,7 @@ declare namespace LocalJSX {
         "sd-card": Omit<SdCard, keyof SdCardAttributes> & { [K in keyof SdCard & keyof SdCardAttributes]?: SdCard[K] } & { [K in keyof SdCard & keyof SdCardAttributes as `attr:${K}`]?: SdCardAttributes[K] } & { [K in keyof SdCard & keyof SdCardAttributes as `prop:${K}`]?: SdCard[K] };
         "sd-checkbox": Omit<SdCheckbox, keyof SdCheckboxAttributes> & { [K in keyof SdCheckbox & keyof SdCheckboxAttributes]?: SdCheckbox[K] } & { [K in keyof SdCheckbox & keyof SdCheckboxAttributes as `attr:${K}`]?: SdCheckboxAttributes[K] } & { [K in keyof SdCheckbox & keyof SdCheckboxAttributes as `prop:${K}`]?: SdCheckbox[K] } & OneOf<"value", SdCheckbox["value"], SdCheckboxAttributes["value"]>;
         "sd-chip": Omit<SdChip, keyof SdChipAttributes> & { [K in keyof SdChip & keyof SdChipAttributes]?: SdChip[K] } & { [K in keyof SdChip & keyof SdChipAttributes as `attr:${K}`]?: SdChipAttributes[K] } & { [K in keyof SdChip & keyof SdChipAttributes as `prop:${K}`]?: SdChip[K] };
+        "sd-chip-input": Omit<SdChipInput, keyof SdChipInputAttributes> & { [K in keyof SdChipInput & keyof SdChipInputAttributes]?: SdChipInput[K] } & { [K in keyof SdChipInput & keyof SdChipInputAttributes as `attr:${K}`]?: SdChipInputAttributes[K] } & { [K in keyof SdChipInput & keyof SdChipInputAttributes as `prop:${K}`]?: SdChipInput[K] };
         "sd-circle-progress": Omit<SdCircleProgress, keyof SdCircleProgressAttributes> & { [K in keyof SdCircleProgress & keyof SdCircleProgressAttributes]?: SdCircleProgress[K] } & { [K in keyof SdCircleProgress & keyof SdCircleProgressAttributes as `attr:${K}`]?: SdCircleProgressAttributes[K] } & { [K in keyof SdCircleProgress & keyof SdCircleProgressAttributes as `prop:${K}`]?: SdCircleProgress[K] };
         "sd-confirm-modal": Omit<SdConfirmModal, keyof SdConfirmModalAttributes> & { [K in keyof SdConfirmModal & keyof SdConfirmModalAttributes]?: SdConfirmModal[K] } & { [K in keyof SdConfirmModal & keyof SdConfirmModalAttributes as `attr:${K}`]?: SdConfirmModalAttributes[K] } & { [K in keyof SdConfirmModal & keyof SdConfirmModalAttributes as `prop:${K}`]?: SdConfirmModal[K] };
         "sd-date-box": Omit<SdDateBox, keyof SdDateBoxAttributes> & { [K in keyof SdDateBox & keyof SdDateBoxAttributes]?: SdDateBox[K] } & { [K in keyof SdDateBox & keyof SdDateBoxAttributes as `attr:${K}`]?: SdDateBoxAttributes[K] } & { [K in keyof SdDateBox & keyof SdDateBoxAttributes as `prop:${K}`]?: SdDateBox[K] };
@@ -5529,6 +5738,7 @@ declare module "@stencil/core" {
             "sd-card": LocalJSX.IntrinsicElements["sd-card"] & JSXBase.HTMLAttributes<HTMLSdCardElement>;
             "sd-checkbox": LocalJSX.IntrinsicElements["sd-checkbox"] & JSXBase.HTMLAttributes<HTMLSdCheckboxElement>;
             "sd-chip": LocalJSX.IntrinsicElements["sd-chip"] & JSXBase.HTMLAttributes<HTMLSdChipElement>;
+            "sd-chip-input": LocalJSX.IntrinsicElements["sd-chip-input"] & JSXBase.HTMLAttributes<HTMLSdChipInputElement>;
             "sd-circle-progress": LocalJSX.IntrinsicElements["sd-circle-progress"] & JSXBase.HTMLAttributes<HTMLSdCircleProgressElement>;
             "sd-confirm-modal": LocalJSX.IntrinsicElements["sd-confirm-modal"] & JSXBase.HTMLAttributes<HTMLSdConfirmModalElement>;
             "sd-date-box": LocalJSX.IntrinsicElements["sd-date-box"] & JSXBase.HTMLAttributes<HTMLSdDateBoxElement>;