@sellmate/design-system 0.0.55 → 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-toggle.entry.js","sources":["src/components/sd-toggle/sd-toggle.scss?tag=sd-toggle","src/components/sd-toggle/sd-toggle.tsx"],"sourcesContent":["@import 'variables';\n\nsd-toggle {\n  display: inline-block;\n  height: 20px;\n  line-height: 0;\n\n  .sd-toggle {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    height: 20px;\n\n    > input {\n      display: none;\n    }\n\n    &__label {\n      font-size: 12px;\n      color: $grey_90;\n      line-height: 20px;\n    }\n\n    &__track {\n      width: 36px;\n      height: 20px;\n      border-radius: 12px;\n      background: $grey_45;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n\n    &__thumb {\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n      background: white;\n      position: absolute;\n      top: 2px;\n      left: 2px;\n      transition: transform 0.2s ease;\n    }\n\n    &--checked {\n      .sd-toggle__track {\n        background: $brilliantblue_75;\n      }\n\n      .sd-toggle__thumb {\n        transform: translateX(16px);\n      }\n    }\n\n    &--disabled {\n      cursor: not-allowed;\n\n      &.sd-toggle--checked {\n        .sd-toggle__track {\n          background: $brilliantblue_40;\n        }\n      }\n\n      &.sd-toggle--unchecked {\n        .sd-toggle__track {\n          background: $grey_20;\n        }\n      }\n    }\n\n    &:hover:not(.sd-toggle--disabled) {\n      &.sd-toggle--checked {\n        .sd-toggle__track {\n          background: $brilliantblue_80;\n        }\n      }\n\n      &.sd-toggle--unchecked {\n        .sd-toggle__track {\n          background: $grey_50;\n        }\n      }\n    }\n  }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-toggle',\n styleUrl: 'sd-toggle.scss',\n})\nexport class SdToggle {\n @Prop({ mutable: true }) value: boolean = false;\n\n @Prop() label: string = '';\n\n @Prop() disabled: boolean = false;\n\n @Event({ eventName: 'sdUpdate' }) change!: EventEmitter<boolean>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.value);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.value);\n }\n\n private updateCheckedState(value: boolean) {\n  this.value = value;\n }\n\n private get toggleClasses(): string {\n  const classes = ['sd-toggle', this.value ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];\n\n  if (this.disabled) {\n   classes.push('sd-toggle--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  const newValue = !this.value;\n  this.value = newValue;\n  this.change.emit(newValue);\n };\n\n render() {\n  return (\n   <label\n    // aria-checked={this.value.toString()}\n    // aria-disabled={this.disabled.toString()}\n    // role=\"switch\"\n    aria-label={this.label || 'toggle'}\n    class={this.toggleClasses}\n   >\n    <input\n     type=\"checkbox\"\n     checked={this.value}\n     disabled={this.disabled}\n     onInput={this.handleChange}\n    />\n    {this.label && <span class=\"sd-toggle__label\">{this.label}</span>}\n    <div class=\"sd-toggle__track\">\n     <div class=\"sd-toggle__thumb\"></div>\n    </div>\n   </label>\n  );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,+nCAA+nC,CAAC;;MCM9oC,QAAQ,GAAA,MAAA;;;;;IACK,KAAK,GAAY,KAAK;IAEvC,KAAK,GAAW,EAAE;IAElB,QAAQ,GAAY,KAAK;AAEC,IAAA,MAAM;IAExC,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGpC,mBAAmB,GAAA;AAClB,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG5B,IAAA,kBAAkB,CAAC,KAAc,EAAA;AACxC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;AAGnB,IAAA,IAAY,aAAa,GAAA;AACxB,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,GAAG,oBAAoB,GAAG,sBAAsB,CAAC;AAEzF,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC;;AAGpC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,YAAY,GAAG,MAAK;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;AACrB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC3B,KAAC;IAED,MAAM,GAAA;QACL,QACC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAIa,IAAI,CAAC,KAAK,IAAI,QAAQ,EAClC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAA,EAEzB,CACC,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACzB,CAAA,EACD,IAAI,CAAC,KAAK,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,EACjE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,GAAO,CAC/B,CACC;;;;;;;"}

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

@@ -1,8 +1,8 @@
-import { h } from './index-7X2nzJWz.js';
+import { h } from './index-C3qNZ7Qh.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-DFRZWz6D.js.map
+//# sourceMappingURL=tooltipArrow-Ck_14rXC.js.map
 
-//# sourceMappingURL=tooltipArrow-DFRZWz6D.js.map
+//# sourceMappingURL=tooltipArrow-Ck_14rXC.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltipArrow-DFRZWz6D.js","sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const TooltipArrow = (props: SVGProps) => (\n <svg\n  width=\"16\"\n  height=\"12\"\n  viewBox=\"0 0 16 12\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <path\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\"\n   fill=\"currentColor\"\n  />\n </svg>\n);\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-Ck_14rXC.js","sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const TooltipArrow = (props: SVGProps) => (\n <svg\n  width=\"16\"\n  height=\"12\"\n  viewBox=\"0 0 16 12\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <path\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\"\n   fill=\"currentColor\"\n  />\n </svg>\n);\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-button/sd-button.d.ts

@@ -1,4 +1,3 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 export type ButtonVariant = 'primary' | 'outline' | 'ghost';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export declare class SdButton {
@@ -15,8 +14,6 @@ export declare class SdButton {
     iconRight?: IconName;
     noHover: boolean;
     class: string;
-    sdClick: EventEmitter<MouseEvent>;
-    private handleClick;
     private getButtonClasses;
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 export declare class SdCard {
     bordered: boolean;
-    class: string;
+    cardClassName?: string;
     render(): any;
 }

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

@@ -3,7 +3,7 @@ export type CheckedType = boolean | any[] | null;
 export declare class SdCheckbox {
     el: HTMLElement;
     /** 현재 선택 상태 또는 배열 형태의 값 */
-    checked: CheckedType;
+    value: CheckedType;
     /** 배열 모드에서의 개별 값 */
     val?: any;
     /** 비활성화 여부 */
@@ -13,7 +13,7 @@ export declare class SdCheckbox {
     /** 내부 체크 상태 */
     private isChecked;
     /** 값 변경 이벤트 */
-    sdChange: EventEmitter<CheckedType>;
+    update: EventEmitter<CheckedType>;
     componentWillLoad(): void;
     componentWillRender(): void;
     watchValueHandler(newValue: CheckedType): void;

package/dist/types/components/sd-date-box/sd-date-box.d.ts

@@ -9,8 +9,8 @@ export declare class SdDateBox {
     isToday: boolean;
     inRange: boolean;
     type: Type;
-    sdClick?: EventEmitter<number | string | null>;
-    sdMouseOver?: EventEmitter<number | string | null>;
+    click?: EventEmitter<number | string | null>;
+    mouseOver?: EventEmitter<number | string | null>;
     private handleClickDate;
     private handleHoverDate;
     render(): any;

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

@@ -10,7 +10,7 @@ export declare class SdDatePicker {
     currentDate: string | null;
     currentYear: number;
     currentMonth: number;
-    sdChange: EventEmitter<string | null>;
+    update: EventEmitter<string | null>;
     componentWillLoad(): void;
     private dateUtil;
     private inputEl?;

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

@@ -12,7 +12,7 @@ export declare class SdDateRangePicker {
     hoverDate: string;
     prevYear: number;
     prevMonth: number;
-    sdChange: EventEmitter<[string, string]>;
+    update: EventEmitter<[string, string]>;
     private inputEl?;
     private dateUtil;
     private tempDateRange;

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

@@ -0,0 +1,34 @@
+import { ValidatableField } from '../sd-form/sd-form';
+import { Rule } from '../../types/form';
+import { SdTooltipProps } from '../sd-tooltip/sd-tooltip';
+export declare class SdField implements ValidatableField {
+    el: HTMLElement;
+    name: string;
+    rules?: Rule[];
+    error?: boolean;
+    disabled?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    status?: 'default' | 'pass' | 'error';
+    label: string;
+    insideLabel: boolean;
+    useLabelRequired: boolean;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
+    errorMsg: string;
+    private hostElement;
+    get value(): any;
+    get fieldStatus(): string;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private findHostElement;
+    private registerToForm;
+    private unregisterFromForm;
+    sdValidate(): Promise<boolean>;
+    sdReset(): Promise<void>;
+    sdResetValidation(): Promise<void>;
+    sdFocus(): Promise<void>;
+    private setError;
+    render(): any;
+    private renderLabel;
+}

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

@@ -13,7 +13,7 @@ export declare class SdFilePicker implements ComponentInterface {
     private showTooltip;
     private fileInputRef?;
     private fileNamesRef?;
-    sdChange: EventEmitter<File[] | File | null>;
+    update: EventEmitter<File[] | File | null>;
     valueChanged(newValue: File[] | File | null): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;

package/dist/types/components/{sd-tooltip-portal/sd-tooltip-portal.d.ts → sd-floating-portal/sd-floating-portal.d.ts}

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class SdTooltipPortal {
+export declare class SdFloatingPopover {
     el: HTMLElement;
     to: HTMLElement | string;
     parentRef: HTMLElement | null;
@@ -7,7 +7,7 @@ export declare class SdTooltipPortal {
     zIndex: number;
     placement: 'top' | 'bottom' | 'left' | 'right';
     open: boolean;
-    sdClose: EventEmitter<void>;
+    close: EventEmitter<void>;
     private container?;
     private wrapper?;
     private rafId?;

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

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Rule } from '../../components';
+export interface ValidatableField {
+    name: string;
+    rules?: Rule[];
+    sdValidate: () => Promise<boolean>;
+    sdReset: () => void;
+    sdResetValidation: () => void;
+    sdFocus: () => void;
+}
+export declare class SdForm {
+    private fields;
+    submitSuccess: EventEmitter<void>;
+    submitFail: EventEmitter<void>;
+    private sortFieldsByDomOrder;
+    sdRegisterField(field: ValidatableField): Promise<void>;
+    sdUnregisterField(name: string): Promise<void>;
+    sdValidate(): Promise<boolean>;
+    sdReset(): Promise<void>;
+    sdResetValidation(): Promise<void>;
+    private onSubmit;
+    render(): any;
+}

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

@@ -1,39 +1,48 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Rule } from '../../types/form';
+import { SdTooltipProps } from '../sd-tooltip/sd-tooltip';
 export declare class SdInput {
-    el: HTMLElement;
+    host: HTMLElement;
     value?: string | number | null;
-    label?: string;
+    type: 'text' | 'password' | 'email';
     insideLabel: boolean;
     placeholder: string;
     disabled: boolean;
     clearable: boolean;
     width?: number | string;
     barcode?: boolean;
-    rules?: Array<(value: string | number | null) => boolean | string>;
+    rules?: Rule[];
     autoFocus: boolean;
     status?: 'default' | 'pass' | 'error';
     inputClass: string;
     readonly: boolean;
+    error: boolean;
+    focused: boolean;
+    hovered: boolean;
+    label?: string;
+    useLabelRequired: boolean;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
     inputStyle: {
         [key: string]: string;
     };
     private internalValue;
-    private error;
-    private focused;
-    private hovered;
     private nativeEl;
-    sdClick?: EventEmitter<string | number | null>;
-    sdInput?: EventEmitter<string | number | null>;
-    sdChange?: EventEmitter<string | number | null>;
-    sdFocus?: EventEmitter<Event>;
-    sdBlur?: EventEmitter<Event>;
+    private formField?;
+    name: string;
+    input?: EventEmitter<string | number | null>;
+    focus?: EventEmitter<Event>;
+    blur?: EventEmitter<Event>;
     valueChanged(newValue: string | number | null): void;
     internalValueChanged(newValue: string | number | null): void;
-    getNativeElement(): Promise<HTMLInputElement | null>;
+    sdGetNativeElement(): Promise<HTMLInputElement | null>;
+    sdValidate(): Promise<void>;
+    sdReset(): Promise<void>;
+    sdResetValidate(): Promise<void>;
+    sdFocus(): Promise<void>;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     private handleInput;
-    private handleChange;
     private handleFocus;
-    getInputStatus(): string;
     render(): any;
 }

package/dist/types/components/sd-modal-card/sd-modal-card.d.ts

@@ -17,8 +17,8 @@ export declare class SdModalCard {
     buttonProps: SdModalCardButtonProps[];
     message: string[];
     modalClass: string;
-    sdClose: EventEmitter<MouseEvent>;
-    sdConfirm: EventEmitter<MouseEvent>;
+    close: EventEmitter<MouseEvent>;
+    confirm: EventEmitter<MouseEvent>;
     private get pointColor();
     private get getModalClass();
     render(): any;

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

@@ -24,18 +24,9 @@ export declare class SdNumberInput {
     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>;
+    update?: EventEmitter<number | null>;
+    focus?: EventEmitter<Event>;
+    blur?: EventEmitter<Event>;
     private formatWithCommas;
     private parseInput;
     private clampMinMax;
@@ -46,13 +37,12 @@ export declare class SdNumberInput {
     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>;
+    sdGetNativeElement(): Promise<HTMLInputElement | null>;
     getInputStatus(): string;
     render(): any;
 }

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

@@ -6,7 +6,7 @@ export declare class SdPortal {
     offset: [number, number];
     zIndex: number;
     open: boolean;
-    sdClose: EventEmitter<void>;
+    close: EventEmitter<void>;
     private container?;
     private wrapper?;
     private rafId?;

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

@@ -11,14 +11,12 @@ export declare class SdRadioButtonGroup {
     size: 'sm' | 'md';
     disabled: boolean;
     name?: string;
-    private selectedValue;
-    sdChange: EventEmitter<RadioValue>;
-    componentWillLoad(): void;
-    valueChanged(newValue: RadioValue): void;
+    change: EventEmitter<RadioValue>;
     private handleRadioChange;
     private isOptionSelected;
     private isOptionDisabled;
     private getButtonClasses;
     private getGroupClasses;
+    private groupName;
     render(): any;
 }

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

@@ -12,7 +12,7 @@ export declare class SdRadioGroup {
     disabled: boolean;
     name?: string;
     private selectedValue;
-    sdChange: EventEmitter<RadioValue>;
+    change: EventEmitter<RadioValue>;
     componentWillLoad(): void;
     valueChanged(newValue: RadioValue): void;
     private handleRadioChange;

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

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SelectOption } from '../sd-select';
+type SelectValue = SelectOption[] | string | number | null;
+export declare class SdSelectDropdown {
+    itemIndex: number;
+    value: SelectValue;
+    options: SelectOption[];
+    width: string;
+    dropdownHeight: string;
+    searchable: boolean;
+    optionPlaceholder: string;
+    useCheckbox: boolean;
+    useAll?: boolean;
+    filteredOptions: SelectOption[];
+    searchText: string | null;
+    isScrolled: boolean;
+    isDropdownReady: boolean;
+    optionClick: EventEmitter<{
+        option: SelectOption;
+        index: number;
+        event: MouseEvent;
+    }>;
+    optionFiltered: EventEmitter<SelectOption[]>;
+    scroll: EventEmitter<Event>;
+    filteredOptionsChanged(newValue: SelectOption[]): void;
+    searchTextChanged(): void;
+    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
+    componentWillLoad(): void;
+    private dropdownRef?;
+    private searchRef?;
+    private optionRef?;
+    private get dropdownSize();
+    private filterOptions;
+    private getSelectedOption;
+    private isOptionSelected;
+    private getNativeInputElement;
+    private scrollToOption;
+    private handleDropdownScroll;
+    render(): any;
+}
+export {};

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

@@ -12,7 +12,7 @@ export declare class SdSelectOption {
     disabled: boolean;
     useCheckbox: boolean;
     isHovered: boolean;
-    isDisabled(): Promise<boolean>;
+    sdIsDisabled(): Promise<boolean>;
     optionClick: EventEmitter<{
         option: SelectOption;
         index: number;

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

@@ -2,10 +2,10 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class SdSelectSearchInput {
     isScrolled?: boolean;
     searchText: string | null;
-    sdSearchInput: EventEmitter<string>;
-    sdSearchFocus: EventEmitter<void>;
+    searchInput: EventEmitter<string>;
+    searchFocus: EventEmitter<void>;
     private searchRef?;
-    getNativeElement(): Promise<HTMLInputElement | null>;
-    searchInputFocus(): Promise<void>;
+    sdGetNativeElement(): Promise<HTMLInputElement | null>;
+    sdSearchInputFocus(): Promise<void>;
     render(): any;
 }

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

@@ -1,5 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
+import { SdTooltipProps } from '../sd-tooltip/sd-tooltip';
+import { Rule } from '../../components';
 export interface SelectOption {
     value: string | number;
     label: string;
@@ -28,7 +30,7 @@ export interface SelectStyleProps {
     };
 }
 export interface SelectEvents {
-    sdChange: {
+    sdUpdate: {
         value: string | number | null;
         option: SelectOption | null;
     };
@@ -37,55 +39,60 @@ export interface SelectEvents {
     };
 }
 export interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {
-    sdChange: SelectOption[] | null;
+    sdUpdate: SelectOption[] | null;
 }
 export declare class SdSelect extends BaseDropdownEvent {
     el: HTMLElement;
     value: string | number | null;
-    label: string;
     options: SelectOption[];
     placeholder: string;
     optionPlaceholder: string;
     width: string;
     dropdownHeight: string;
+    autoFocus: boolean;
     disabled: boolean;
     clearable: boolean;
     searchable: boolean;
+    label: string;
+    insideLabel: boolean;
+    useLabelRequired: boolean;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
+    name?: string;
+    rules?: Rule[];
+    error?: boolean;
     optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
-    filteredOptions: SelectOption[];
     isOpen: boolean;
-    searchText: string | null;
     itemIndex: number;
     isScrolled: boolean;
-    sdChange?: EventEmitter<SelectEvents['sdChange']>;
+    update?: EventEmitter<SelectEvents['sdUpdate']>;
     dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;
     private selectRef?;
-    private searchRef?;
-    private optionRef?;
-    private dropdownRef?;
-    open(): Promise<void>;
-    valueChanged(): void;
-    optionsChanged(): void;
-    searchTextChanged(): void;
-    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
+    private triggerRef?;
+    private formField?;
+    private filteredOptions;
+    private dropDownWidth;
+    sdOpen(): Promise<void>;
+    sdValidate(): Promise<void>;
+    sdReset(): Promise<void>;
+    sdResetValidate(): Promise<void>;
+    sdFocus(): Promise<void>;
+    valueChanged(): Promise<void>;
+    isOpenChanged(): Promise<void>;
     componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
-    isOpenChanged(): Promise<void>;
     protected handleDocumentClick(event: Event): void;
     protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
+    private getSelectedOption;
     closeDropdown(): void;
     handleTriggerClick: (event: Event) => void;
     handleOptionClick: (detail: {
         option: SelectOption;
         event: Event;
     }) => void;
-    private filterOptions;
-    private getSelectedOption;
-    private handleDropdownScroll;
-    private getNativeInputElement;
-    private scrollToOption;
     render(): any;
-    private renderLabel;
     private renderTrigger;
     private renderDropdown;
 }

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

@@ -1,55 +1,61 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { SelectOption, SelectMultipleEvents } from '../../types/select';
 import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
+import { Rule, SdTooltipProps } from '../../components';
 export declare class SdSelectMultiple extends BaseDropdownEvent {
     el: HTMLElement;
     value: SelectOption[] | null;
-    label: string;
     options: SelectOption[];
     placeholder: string;
     optionPlaceholder: string;
     width: string;
     dropdownHeight: string;
+    autoFocus: boolean;
     disabled: boolean;
     clearable: boolean;
     searchable: boolean;
+    useAll: boolean;
     useCheckbox: boolean;
+    label: string;
+    useLabelRequired: boolean;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
+    name?: string;
+    rules?: Rule[];
+    error?: boolean;
     optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
-    filteredOptions: SelectOption[];
     isOpen: boolean;
-    searchText: string | null;
     itemIndex: number;
     isScrolled: boolean;
-    sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;
+    update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;
     dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;
     private selectRef?;
-    private searchRef?;
-    private optionRef?;
-    private dropdownRef?;
-    open(): Promise<void>;
+    private triggerRef?;
+    private formField?;
+    private filteredOptions;
+    private dropDownWidth;
+    sdOpen(): Promise<void>;
+    sdValidate(): Promise<void>;
+    sdReset(): Promise<void>;
+    sdResetValidate(): Promise<void>;
+    sdFocus(): Promise<void>;
     valueChanged(): void;
-    optionsChanged(): void;
-    searchTextChanged(): void;
-    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
     isOpenChanged(): Promise<void>;
-    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     protected handleDocumentClick(event: Event): void;
     protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
+    private handleOptionSelection;
+    private getSelectedOption;
+    closeDropdown(): void;
     handleTriggerClick: (event: Event) => void;
     handleOptionClick: (detail: {
         option: SelectOption;
         event: Event;
     }) => void;
-    private filterOptions;
-    private getSelectedOption;
-    private handleDropdownScroll;
-    private getNativeInputElement;
-    private handleOptionSelection;
-    closeDropdown(): void;
-    private scrollToOption;
     render(): any;
-    private renderLabel;
     private renderTrigger;
     private renderDropdown;
 }

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

@@ -1,6 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
 import { SelectMultipleEvents, SelectOption, SelectStyleProps } from '../sd-select/sd-select';
+import { SdTooltipProps } from '../sd-tooltip/sd-tooltip';
+import { Rule } from '../../components';
 export interface SelectOptionGroup extends SelectOption {
     type: 'group' | 'subgroup' | 'item' | 'all';
     parent?: string;
@@ -8,7 +10,6 @@ export interface SelectOptionGroup extends SelectOption {
 export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     el: HTMLElement;
     value: SelectOptionGroup[] | null;
-    label: string;
     options: SelectOptionGroup[];
     placeholder: string;
     optionPlaceholder: string;
@@ -21,6 +22,13 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     useAll: boolean;
     allCheckedLabel: string;
     allCheckOptionLabel: string;
+    label: string;
+    useLabelRequired: boolean;
+    labelTooltip: string;
+    labelTooltipProps: SdTooltipProps | null;
+    name?: string;
+    rules?: Rule[];
+    error?: boolean;
     containerStyle: SelectStyleProps['containerStyle'];
     triggerStyle: SelectStyleProps['triggerStyle'];
     dropdownStyle: SelectStyleProps['dropdownStyle'];
@@ -33,19 +41,27 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     itemIndex: number;
     isScrolled: boolean;
     isDropdownReady: boolean;
-    sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;
+    update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;
     dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;
     private selectRef?;
     private searchRef?;
+    private triggerRef?;
     private optionRef?;
     private dropdownRef?;
+    private formField?;
+    private dropDownWidth;
+    sdOpen(): Promise<void>;
+    sdValidate(): Promise<void>;
+    sdReset(): Promise<void>;
+    sdResetValidate(): Promise<void>;
+    sdFocus(): Promise<void>;
     valueChanged(): void;
     optionsChanged(): void;
     searchTextChanged(): void;
     itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
     isOpenChanged(): Promise<void>;
-    open(): Promise<void>;
     componentWillLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     protected handleDocumentClick(event: Event): void;
     protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
@@ -85,7 +101,6 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     closeDropdown(): void;
     private scrollToOption;
     render(): any;
-    private renderLabel;
     private renderTrigger;
     private renderDropdown;
 }