@type-dom/ui 0.0.10 → 0.1.0

package/src/components/form/td-option/td-option.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdOption extends IUI {
+import { ITypeConfig, ITypeLI } from '@type-dom/framework';
+export interface ITdOption extends ITypeLI {
     className: 'TdOption';
 }
-export interface ITdOptionConfig extends IUIConfig {
+export interface ITdOptionConfig extends ITypeConfig {
     /**
      * @description value of option
      *     required: true,

package/src/components/form/td-option-group/td-option-group.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeUL } from '@type-dom/framework';
 import { ITdOptionGroup, ITdOptionGroupConfig } from './td-option-group.interface';
-export declare class TdOptionGroup extends UI implements ITdOptionGroup {
+export declare class TdOptionGroup extends TypeUL implements ITdOptionGroup {
     className: 'TdOptionGroup';
     props: ITdOptionGroupConfig;
     constructor(params?: ITdOptionGroupConfig);

package/src/components/form/td-option-group/td-option-group.class.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdOptionGroup = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_select_style_1 = require("../td-select/td-select.style");
-class TdOptionGroup extends ui_abstract_1.UI {
+class TdOptionGroup extends framework_1.TypeUL {
     constructor(params = {}) {
-        super(params, 'ul');
+        super();
         this.className = 'TdOptionGroup';
         this.attr.addObj({
             name: 'option-group-wrap'

package/src/components/form/td-option-group/td-option-group.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdOptionGroup extends IUI {
+import { ITypeConfig, ITypeUL } from '@type-dom/framework';
+export interface ITdOptionGroup extends ITypeUL {
     className: 'TdOptionGroup';
 }
-export interface ITdOptionGroupConfig extends IUIConfig {
+export interface ITdOptionGroupConfig extends ITypeConfig {
     /**
      * @description name of the group
      */

package/src/components/form/td-radio/td-radio.class.d.ts

@@ -1,7 +1,6 @@
-import { Input, Span } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Input, Span, TypeLabel } from '@type-dom/framework';
 import { ITdRadio, ITdRadioConfig } from './td-radio.interface';
-export declare class TdRadio extends UI implements ITdRadio {
+export declare class TdRadio extends TypeLabel implements ITdRadio {
     className: 'TdRadio';
     props: ITdRadioConfig;
     inputOriginal: Input;

package/src/components/form/td-radio/td-radio.class.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadio = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
-class TdRadio extends ui_abstract_1.UI {
+class TdRadio extends framework_1.TypeLabel {
     constructor(params = {}) {
-        super(params, 'label');
+        super();
+        // this.useTag('label');
         this.className = 'TdRadio';
+        this.attr.addObj({
+            name: 'td-radio'
+        });
         this.style.addObj({
             color: var_1.$textColor.regular,
             fontWeight: var_1.$fontWeightPrimary,
@@ -160,7 +163,7 @@ class TdRadio extends ui_abstract_1.UI {
         this.disabled = disabled;
         if (disabled) {
             this.style.setObj({
-                cursor: 'notAllowed',
+                cursor: 'not-allowed',
                 opacity: 0.5
                 //   禁用事件
                 //   pointerEvents: 'none',
@@ -170,7 +173,7 @@ class TdRadio extends ui_abstract_1.UI {
             });
             this.inputOriginal.attr.setObj({ disabled: true });
             this.inputInner.style.setObj({
-                cursor: 'notAllowed',
+                cursor: 'not-allowed',
                 // color: $colors.default.base,
                 // borderWidth: '1px',
                 // borderStyle: 'solid',

package/src/components/form/td-radio/td-radio.interface.d.ts

@@ -1,9 +1,9 @@
+import { ITypeConfig, ITypeLabel } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdRadio extends IUI {
+export interface ITdRadio extends ITypeLabel {
     className: 'TdRadio';
 }
-export interface ITdRadioConfig extends IUIConfig {
+export interface ITdRadioConfig extends ITypeConfig {
     /**
      * @description binding value
      */

package/src/components/form/td-radio-button/td-radio-button.class.d.ts

@@ -1,7 +1,6 @@
-import { Input, Span } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Input, Span, TypeLabel } from '@type-dom/framework';
 import { ITdRadioButton, ITdRadioButtonConfig } from './td-radio-button.interface';
-export declare class TdRadioButton extends UI implements ITdRadioButton {
+export declare class TdRadioButton extends TypeLabel implements ITdRadioButton {
     className: 'TdRadioButton';
     inputOriginal: Input;
     radioLabel: Span;

package/src/components/form/td-radio-button/td-radio-button.class.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadioButton = void 0;
 const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_button_style_1 = require("../../basic/td-button/td-button.style");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
-class TdRadioButton extends ui_abstract_1.UI {
+class TdRadioButton extends framework_1.TypeLabel {
     constructor(params = {}) {
-        super(params, 'label');
+        super();
         this.className = 'TdRadioButton';
         this.attr.addName('radio-button');
         this.style.addObj({
@@ -61,7 +61,7 @@ class TdRadioButton extends ui_abstract_1.UI {
                 // color: $buttonTextColor.default,
                 // transition: getCssVar('transition-all'),
                 fontSize: var_1.$fontSizes.base,
-                padding: var_1.$paddingVerticalMap.default + ' ' + var_1.$paddingHorizontalMap.default
+                padding: td_button_style_1.$buttonPaddingVertical.default + ' ' + td_button_style_1.$buttonPaddingHorizontal.default
             }
         });
         this.addChildren(this.inputOriginal, this.radioLabel);
@@ -93,11 +93,11 @@ class TdRadioButton extends ui_abstract_1.UI {
             height: var_1.$commonComponentSize[size]
         });
         this.radioLabel.style.addObj({
-            padding: var_1.$paddingVerticalMap[size] + ' ' + var_1.$paddingHorizontalMap[size],
+            padding: td_button_style_1.$buttonPaddingVertical[size] + ' ' + td_button_style_1.$buttonPaddingHorizontal[size],
             fontSize: var_1.$fontSizes[size]
         });
         if (props === null || props === void 0 ? void 0 : props.isFirst) {
-            const radius = var_1.$borderRadiusMap[size];
+            const radius = td_button_style_1.$buttonBorderRadius[size];
             this.radioLabel.style.addObj({
                 borderRadius: radius + ' 0 0 ' + radius
             });
@@ -108,13 +108,13 @@ class TdRadioButton extends ui_abstract_1.UI {
             });
         }
         if (props === null || props === void 0 ? void 0 : props.isLast) {
-            const radius = var_1.$borderRadiusMap[size];
+            const radius = td_button_style_1.$buttonBorderRadius[size];
             this.radioLabel.style.addObj({
                 borderRadius: '0 ' + radius + ' ' + radius + ' 0'
             });
         }
         if (props === null || props === void 0 ? void 0 : props.checked) {
-            this.setChecked(props === null || props === void 0 ? void 0 : props.checked);
+            this.setChecked(!!(props === null || props === void 0 ? void 0 : props.checked));
         }
         if (props === null || props === void 0 ? void 0 : props.disabled) {
             this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
@@ -149,7 +149,7 @@ class TdRadioButton extends ui_abstract_1.UI {
         this.disabled = disabled;
         if (disabled) {
             this.style.setObj({
-                cursor: 'notAllowed',
+                cursor: 'not-allowed',
                 opacity: 0.5
                 //   禁用事件
                 //   pointerEvents: 'none',

package/src/components/form/td-radio-button/td-radio-button.interface.d.ts

@@ -1,9 +1,9 @@
+import { ITypeConfig, ITypeLabel } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdRadioButton extends IUI {
+export interface ITdRadioButton extends ITypeLabel {
     className: 'TdRadioButton';
 }
-export interface ITdRadioButtonConfig extends IUIConfig {
+export interface ITdRadioButtonConfig extends ITypeConfig {
     /**
      * @description binding value
      */

package/src/components/form/td-radio-group/td-radio-group.class.d.ts

@@ -1,12 +1,9 @@
-import { IJsonData, IJsonDataProp, IPrimitive } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-import { TdRadio } from '../td-radio/td-radio.class';
+import { IJsonData, IJsonDataProp, IPrimitive, TypeDiv } from '@type-dom/framework';
 import { ITdRadioConfig } from '../td-radio/td-radio.interface';
 import { ITdRadioGroup, ITdRadioGroupConfig } from './td-radio-group.interface';
-export declare class TdRadioGroup extends UI implements ITdRadioGroup {
+export declare class TdRadioGroup extends TypeDiv implements ITdRadioGroup {
     className: 'TdRadioGroup';
     disabled?: boolean;
-    childNodes: TdRadio[];
     props: ITdRadioGroupConfig;
     constructor(params?: ITdRadioGroupConfig);
     get resultValue(): IPrimitive | IJsonData | IJsonDataProp[];

package/src/components/form/td-radio-group/td-radio-group.class.js

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadioGroup = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_radio_class_1 = require("../td-radio/td-radio.class");
 const td_radio_button_class_1 = require("../td-radio-button/td-radio-button.class");
-class TdRadioGroup extends ui_abstract_1.UI {
+class TdRadioGroup extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdRadioGroup';
+        this.attr.addObj({
+            name: 'td-radio-group'
+        });
         this.style.addObj({
             display: 'inline-flex',
             alignItems: 'center',
@@ -16,7 +18,6 @@ class TdRadioGroup extends ui_abstract_1.UI {
             fontSize: '0',
             marginRight: '12px',
         });
-        this.childNodes = [];
         this.props = this.useParams(params);
     }
     get resultValue() {
@@ -92,13 +93,15 @@ class TdRadioGroup extends ui_abstract_1.UI {
         }
         // console.error('value is ', value);
         this.childNodes.forEach((opt) => {
-            if (String(opt.inputOriginal.attr.get('value')) === String(value)) {
-                // 设置选中样式
-                opt.setChecked(true);
-            }
-            else {
-                // 设置非选中样式
-                opt.setChecked(false);
+            if (opt instanceof td_radio_class_1.TdRadio) {
+                if (String(opt.inputOriginal.attr.get('value')) === String(value)) {
+                    // 设置选中样式
+                    opt.setChecked(true);
+                }
+                else {
+                    // 设置非选中样式
+                    opt.setChecked(false);
+                }
             }
         });
     }

package/src/components/form/td-radio-group/td-radio-group.interface.d.ts

@@ -1,11 +1,10 @@
+import { IJsonData, IPrimitive, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ITdRadioConfig } from '../td-radio/td-radio.interface';
-import { IJsonData, IPrimitive, XProxy } from '@type-dom/framework';
-export interface ITdRadioGroup extends IUI {
+export interface ITdRadioGroup extends ITypeDiv {
     className: 'TdRadioGroup';
 }
-export interface ITdRadioGroupConfig extends IUIConfig {
+export interface ITdRadioGroupConfig extends ITypeConfig {
     isButton?: boolean;
     options?: ITdRadioConfig[];
     /**

package/src/components/form/td-select/dropdown/dropdown.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
 import { ITdSelectDropdown, ITdSelectDropdownConfig } from './dropdown.interface';
-export declare class TdSelectDropDown extends UI implements ITdSelectDropdown {
+import { TypeDiv } from '@type-dom/framework';
+export declare class TdSelectDropDown extends TypeDiv implements ITdSelectDropdown {
     className: 'TdSelectDropdown';
     props: ITdSelectDropdownConfig;
     private header?;

package/src/components/form/td-select/dropdown/dropdown.class.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSelectDropDown = void 0;
 const var_1 = require("../../../../styles/var");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
 const td_select_style_1 = require("../td-select.style");
-class TdSelectDropDown extends ui_abstract_1.UI {
+class TdSelectDropDown extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdSelectDropdown';
         this.style.addObj({
             // z-index: calc(#{getCssVar('index-top')} + 1);

package/src/components/form/td-select/dropdown/dropdown.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdSelectDropdown extends IUI {
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+export interface ITdSelectDropdown extends ITypeDiv {
     className: 'TdSelectDropdown';
 }
-export interface ITdSelectDropdownConfig extends IUIConfig {
+export interface ITdSelectDropdownConfig extends ITypeConfig {
     header?: TypeElement;
     footer?: TypeElement;
 }

package/src/components/form/td-select/td-select.class.d.ts

@@ -1,8 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
-import { IUIConfig } from '../../../ui/ui.interface';
-import { ITdSelect } from './td-select.interface';
-export declare class TdSelect extends UI implements ITdSelect {
+import { TypeDiv } from '@type-dom/framework';
+import { ITdSelect, ITdSelectConfig } from './td-select.interface';
+export declare class TdSelect extends TypeDiv implements ITdSelect {
     className: 'TdSelect';
-    props: IUIConfig;
-    constructor(params?: IUIConfig);
+    constructor(params?: ITdSelectConfig);
 }

package/src/components/form/td-select/td-select.class.js

@@ -2,15 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSelect = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_tooltip_class_1 = require("../../feedback/td-tooltip/td-tooltip.class");
 const dropdown_class_1 = require("./dropdown/dropdown.class");
-const td_select_style_1 = require("./td-select.style");
-class TdSelect extends ui_abstract_1.UI {
+class TdSelect extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdSelect';
-        this.style.addObj(td_select_style_1.$select);
+        // this.style.addObj($select); // todo 应该是 $selectStyle
         this.addChild(new td_tooltip_class_1.TdTooltip({
             slot: [
                 new framework_1.Div({
@@ -20,7 +18,7 @@ class TdSelect extends ui_abstract_1.UI {
                     name: 'content',
                     childNodes: [
                         new dropdown_class_1.TdSelectDropDown({
-                            name: 'content-inner',
+                            name: 'content-inner'
                         })
                     ]
                 })

package/src/components/form/td-select/td-select.interface.d.ts

@@ -1,10 +1,11 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { IJsonData, IPrimitive, XProxy } from '@type-dom/framework';
+import { AnyFn, IJsonData, IPrimitive, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-export interface ITdSelect extends IUI {
+import { TdIcon } from '../../basic';
+import { CheckboxValueType } from '../td-checkbox/td-checkbox.interface';
+export interface ITdSelect extends ITypeDiv {
     className: 'TdSelect';
 }
-export interface ITdSelectConfig extends IUIConfig {
+export interface ITdSelectConfig extends ITypeConfig {
     /**
      * @description the name attribute of select input
      */
@@ -17,7 +18,7 @@ export interface ITdSelectConfig extends IUIConfig {
      * @description binding value
      *     default: undefined,
      */
-    modelValue?: IPrimitive | XProxy<IJsonData>;
+    modelValue?: IPrimitive | object | CheckboxValueType[] | XProxy<IJsonData>;
     /**
      * @description the autocomplete attribute of select input
      *     default: 'off',
@@ -83,9 +84,11 @@ export interface ITdSelectConfig extends IUIConfig {
     /**
      * @description custom remote search method
      */
+    remoteMethod?: AnyFn;
     /**
      * @description custom filter method
      */
+    filterMethod?: AnyFn;
     /**
      * @description whether multiple-select is activated
      */
@@ -136,18 +139,23 @@ export interface ITdSelectConfig extends IUIConfig {
     persistent?: boolean;
     /**
      * @description custom clear icon component
+     *     default: CircleClose,
      */
+    clearIcon?: TdIcon;
     /**
      * @description whether the width of the dropdown is the same as the input
      */
     fitInputWidth?: boolean;
     /**
      * @description custom suffix icon component
+     *   default: ArrowDown,
      */
+    suffixIcon?: TdIcon;
     /**
      * @description tag type
      * default: 'info'
      */
+    tagType?: string;
     /**
      * @description whether to trigger form validation
      *     default: true,

package/src/components/form/td-select/td-select.style.d.ts

@@ -1,3 +1,5 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdSelectConfig } from './td-select.interface';
 export declare const $select: {
     borderColorHover: string;
     disabledColor: string;
@@ -5,6 +7,8 @@ export declare const $select: {
     fontSize: string;
     closeHoverColor: string;
     inputColor: string;
+    multipleInputColor: string;
+    inputFocusBorderColor: string;
     inputFontSize: string;
     width: string;
 };
@@ -51,3 +55,22 @@ export declare const $selectItemHeight: {
     default: string;
     small: string;
 };
+export declare const $selectStyle: IStyle;
+export declare function mixInputBorder($color: string): {
+    boxShadow: string;
+};
+export declare const $selectWrapperStyle: IStyle;
+export declare const $selectPrefixStyle: IStyle;
+export declare const $selectSuffixStyle: IStyle;
+export declare const $selectCaretStyle: IStyle;
+export declare const $selectSelectionStyle: IStyle;
+export declare const $selectedItemStyle: IStyle;
+export declare const $selectTagTextStyle: IStyle;
+export declare const $selectPlaceholderStyle: IStyle;
+export declare const $selectPopperStyle: IStyle;
+export declare const $selectInputWrapperStyle: IStyle;
+export declare const $selectInputStyle: IStyle;
+export declare const $selectInputCalculatorStyle: IStyle;
+export declare function useSelectStyle(params: ITdSelectConfig): void;
+export declare function useDisabled(params: ITdSelectConfig): void;
+export declare function useSize(params: ITdSelectConfig): void;

package/src/components/form/td-select/td-select.style.js

@@ -1,8 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$selectItemHeight = exports.$selectItemGap = exports.$selectNearMarginLeft = exports.$selectWrapperPadding = exports.$selectDropdown = exports.$selectGroup = exports.$selectOption = exports.$select = void 0;
+exports.$selectInputCalculatorStyle = exports.$selectInputStyle = exports.$selectInputWrapperStyle = exports.$selectPopperStyle = exports.$selectPlaceholderStyle = exports.$selectTagTextStyle = exports.$selectedItemStyle = exports.$selectSelectionStyle = exports.$selectCaretStyle = exports.$selectSuffixStyle = exports.$selectPrefixStyle = exports.$selectWrapperStyle = exports.$selectStyle = exports.$selectItemHeight = exports.$selectItemGap = exports.$selectNearMarginLeft = exports.$selectWrapperPadding = exports.$selectDropdown = exports.$selectGroup = exports.$selectOption = exports.$select = void 0;
+exports.mixInputBorder = mixInputBorder;
+exports.useSelectStyle = useSelectStyle;
+exports.useDisabled = useDisabled;
+exports.useSize = useSize;
 // Select
 const var_1 = require("../../../styles/var");
+const td_input_style_1 = require("../td-input/td-input.style");
+const transition_1 = require("../../../styles/transition");
 exports.$select = {
     // borderColorHover: getCssVar('border-color-hover'),
     borderColorHover: var_1.$borderColorHover,
@@ -17,7 +23,9 @@ exports.$select = {
     // inputColor: getCssVar('text-color-placeholder'),
     inputColor: var_1.$textColor.placeholder,
     // multipleInputColor: getCssVar('text-color-regular'),
+    multipleInputColor: var_1.$textColor.regular,
     // inputFocusBorderColor: getCssVar('color-primary'),
+    inputFocusBorderColor: var_1.$colorPrimary,
     inputFontSize: '14px',
     width: '100%'
 };
@@ -74,3 +82,164 @@ exports.$selectItemHeight = {
     default: '24px',
     small: '20px'
 };
+exports.$selectStyle = {
+    display: 'inline-block',
+    position: 'relative',
+    verticalAlign: 'middle',
+    // width: getCssVar('select-width'),
+    width: exports.$select.width
+};
+function mixInputBorder($color) {
+    return {
+        boxShadow: '0 0 0 1px ' + $color + 'inset'
+    };
+}
+exports.$selectWrapperStyle = Object.assign({ display: 'flex', alignItems: 'center', position: 'relative', boxSizing: 'border-box', cursor: 'pointer', textAlign: 'left', 
+    // font-size: map.get($input-font-size, 'default'),
+    fontSize: td_input_style_1.$inputFontSize.default, 
+    // padding: map.get($select-wrapper-padding, 'default'),
+    padding: exports.$selectWrapperPadding.default, 
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default, 
+    // min-height: map.get($input-height, 'default'),
+    minHeight: td_input_style_1.$inputHeight.default, 
+    // line-height: map.get($select-item-height, 'default'),
+    lineHeight: exports.$selectItemHeight.default, 
+    // border-radius: getCssVar('border-radius-base'),
+    borderRadius: var_1.$borderRadius.base, 
+    // background-color: getCssVar('fill-color', 'blank'),
+    backgroundColor: var_1.$fillColor.blank, 
+    // transition: getCssVar('transition', 'duration'),
+    transition: transition_1.$transitionDuration.default, transform: 'translate3d(0, 0, 0)' }, mixInputBorder(var_1.$borderColor.base));
+exports.$selectPrefixStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default,
+    // color: var(
+    //   #{getCssVarName('input-icon-color')},
+    //   map.get($input, 'icon-color')
+    // );
+    color: td_input_style_1.$input.iconColor
+};
+exports.$selectSuffixStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default,
+    // color: var(
+    //   #{getCssVarName('input-icon-color')},
+    //   map.get($input, 'icon-color')
+    // );
+    color: td_input_style_1.$input.iconColor
+};
+exports.$selectCaretStyle = {
+    //   color: getCssVar('select-input-color'),
+    color: exports.$select.inputColor,
+    //   font-size: getCssVar('select-input-font-size'),
+    fontSize: exports.$select.inputFontSize,
+    // transition: getCssVar('transition', 'duration'),
+    transition: transition_1.$transitionDuration.default,
+    transform: 'rotateZ(0deg)',
+    cursor: 'pointer'
+};
+exports.$selectSelectionStyle = {
+    position: 'relative',
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+    minWidth: 0,
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default
+};
+exports.$selectedItemStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    userSelect: 'none'
+};
+exports.$selectTagTextStyle = {
+    display: 'block',
+    lineHeight: 'normal',
+    // @include utils-ellipsis,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+};
+exports.$selectPlaceholderStyle = {
+    position: 'absolute',
+    display: 'block',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '100%',
+    //    @include utils-ellipsis;
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    //    color: var(
+    //      #{getCssVarName('input-text-color')},
+    //      map.get($input, 'text-color')
+    // );
+    color: td_input_style_1.$input.textColor
+};
+exports.$selectPopperStyle = {
+    // @include picker-popper(
+    //   map.get($select-dropdown, 'bg-color'),
+    //   map.get($select-dropdown, 'border'),
+    //   map.get($select-dropdown, 'shadow')
+    // );
+    backgroundColor: exports.$selectDropdown.bgColor,
+    border: exports.$selectDropdown.border,
+    boxShadow: exports.$selectDropdown.shadow
+};
+exports.$selectInputWrapperStyle = {
+    maxWidth: '100%'
+};
+exports.$selectInputStyle = {
+    border: 'none',
+    outline: 'none',
+    padding: 0,
+    // color: getCssVar('select-multiple-input-color'),
+    color: exports.$select.multipleInputColor,
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    appearance: 'none',
+    // height: map.get($select-item-height, 'default'),
+    height: exports.$selectItemHeight.default,
+    maxWidth: '100%',
+    backgroundColor: 'transparent'
+};
+exports.$selectInputCalculatorStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    maxWidth: '100%',
+    visibility: 'hidden',
+    whiteSpace: 'pre',
+    overflow: 'hidden'
+};
+function useSelectStyle(params) {
+    useSize(params);
+    useDisabled(params);
+}
+function useDisabled(params) {
+    const disabled = params.disabled;
+    if (disabled) {
+    }
+    else {
+    }
+}
+function useSize(params) {
+    const size = params.size || 'default';
+    exports.$selectWrapperStyle.gap = exports.$selectItemGap[size];
+    exports.$selectWrapperStyle.padding = exports.$selectWrapperPadding[size];
+    exports.$selectWrapperStyle.minHeight = exports.$selectItemHeight[size];
+    exports.$selectWrapperStyle.lineHeight = exports.$selectItemHeight[size];
+    exports.$selectWrapperStyle.fontSize = td_input_style_1.$inputFontSize[size];
+    exports.$selectSelectionStyle.gap = exports.$selectItemGap[size];
+    exports.$selectPrefixStyle.gap = exports.$selectItemGap[size];
+    exports.$selectSuffixStyle.gap = exports.$selectItemGap[size];
+    exports.$selectInputStyle.height = exports.$selectItemHeight[size];
+}