@type-dom/ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSwitch = void 0;
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+const td_switch_style_1 = require("./td-switch.style");
+const td_switch_core_1 = require("./widget/td-switch-core");
+const td_switch_left_1 = require("./widget/td-switch-left");
+const td_switch_right_1 = require("./widget/td-switch-right");
+class TdSwitch extends ui_abstract_1.UI {
+    constructor(config) {
+        var _a, _b, _c;
+        super();
+        this.className = 'TdSwitch';
+        this.config = config;
+        this.addStyleObj({
+            display: 'inline-flex',
+            alignItems: 'center',
+            position: 'relative',
+            verticalAlign: 'middle',
+            fontSize: td_switch_style_1.$switchFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+            lineHeight: td_switch_style_1.$switchCoreHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+            height: td_switch_style_1.$switchHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+        });
+        this.modelValue = (_a = config === null || config === void 0 ? void 0 : config.modelValue) !== null && _a !== void 0 ? _a : false;
+        this.activeValue = (_b = config === null || config === void 0 ? void 0 : config.activeValue) !== null && _b !== void 0 ? _b : true;
+        this.inactiveValue = (_c = config === null || config === void 0 ? void 0 : config.inactiveValue) !== null && _c !== void 0 ? _c : false;
+        this.input = new framework_1.Input({
+            attrObj: {
+                type: 'checkbox',
+                role: 'switch'
+            },
+            styleObj: {
+                display: 'none'
+            }
+        });
+        this.addChild(this.input);
+        if (!(config === null || config === void 0 ? void 0 : config.inlinePrompt) && ((config === null || config === void 0 ? void 0 : config.inactiveIcon) || (config === null || config === void 0 ? void 0 : config.inactiveText))) {
+            this.left = new td_switch_left_1.TdSwitchLeft(config);
+            this.addChild(this.left);
+        }
+        this.core = new td_switch_core_1.TdSwitchCore(Object.assign({}, config, {
+            modelValue: this.modelValue,
+            activeValue: this.activeValue,
+            inactiveValue: this.inactiveValue
+        }));
+        this.addChild(this.core);
+        if (!(config === null || config === void 0 ? void 0 : config.inlinePrompt) && ((config === null || config === void 0 ? void 0 : config.activeIcon) || (config === null || config === void 0 ? void 0 : config.activeText))) {
+            console.log('td-switch right .');
+            this.right = new td_switch_right_1.TdSwitchRight(config);
+            this.addChild(this.right);
+        }
+        this.setChecked(this.modelValue === this.activeValue);
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        // todo
+        console.log('td-switch setConfig . ');
+        if (config === null || config === void 0 ? void 0 : config.disabled) {
+            this.setDisabled(config === null || config === void 0 ? void 0 : config.disabled);
+        }
+    }
+    initEvents() {
+        this.addEvents({
+            click: (evt) => {
+                // changeValue
+                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                this.switchValue();
+            }
+        });
+    }
+    handleChange() {
+        console.log('handleChange . ');
+        const config = this.config;
+        const checked = this.modelValue === this.activeValue;
+        // this.modelValue = !this.modelValue;
+        this.modelValue = checked ? this.inactiveValue : this.activeValue;
+        const val = checked ? this.inactiveValue : this.activeValue;
+        // emit(UPDATE_MODEL_EVENT, val)
+        // emit(CHANGE_EVENT, val)
+        // emit(INPUT_EVENT, val)
+        (0, framework_1.nextTick)(() => {
+            this.input.dom.checked = !checked;
+            console.log('handleChange . this.input.dom.checked is ', checked);
+            // this.input.setValue(val);
+            this.setChecked(!checked);
+        });
+    }
+    setDisabled(disabled) {
+        var _a, _b;
+        if (disabled) {
+            this.addStyleObj({
+                opacity: 0.6
+            });
+            this.input.addAttrObj({
+                disabled: true,
+                ariaDisabled: true
+            });
+            (_a = this.left) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+                cursor: framework_1.StyleCursor.notAllowed
+            });
+            this.core.setStyleObj({
+                cursor: framework_1.StyleCursor.notAllowed
+            });
+        }
+        else {
+            this.addStyleObj({
+                opacity: 1
+            });
+            this.input.addAttrObj({
+                disabled: false,
+                ariaDisabled: false
+            });
+            (_b = this.left) === null || _b === void 0 ? void 0 : _b.setStyleObj({
+                cursor: framework_1.StyleCursor.auto
+            });
+            this.core.setStyleObj({
+                cursor: framework_1.StyleCursor.auto
+            });
+        }
+    }
+    setChecked(checked) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        if (checked) {
+            this.core.setStyleObj({
+                backgroundColor: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.switchOnColor) !== null && _b !== void 0 ? _b : td_switch_style_1.$switchOnColor
+            });
+            this.core.action.setStyleObj({
+                color: td_switch_style_1.$switchOnColor,
+                // left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
+                left: 'calc(100% - ' + td_switch_style_1.$switchButtonSize[((_c = this.config) === null || _c === void 0 ? void 0 : _c.size) || 'default'] + ' - 1px)'
+            });
+            if (this.right) {
+                this.right.setStyleObj({
+                    color: var_1.$colors.primary.base
+                });
+            }
+            if (this.left) {
+                this.left.setStyleObj({
+                    color: var_1.$colors.default.base
+                });
+            }
+            if ((_d = this.config) === null || _d === void 0 ? void 0 : _d.inlinePrompt) {
+                this.core.setInnerChecked(true);
+            }
+            if ((_e = this.config) === null || _e === void 0 ? void 0 : _e.activeActionIcon) {
+                (_f = this.core.actionIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.config.activeActionIcon);
+            }
+            else if ((_g = this.config) === null || _g === void 0 ? void 0 : _g.activeActionText) {
+                (_j = (_h = this.core.actionSpan) === null || _h === void 0 ? void 0 : _h.textNode) === null || _j === void 0 ? void 0 : _j.setText(this.config.activeActionText);
+            }
+        }
+        else {
+            this.core.setStyleObj({
+                backgroundColor: (_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.switchOffColor) !== null && _l !== void 0 ? _l : td_switch_style_1.$switchOffColor
+            });
+            this.core.action.setStyleObj({
+                left: '1px',
+                color: td_switch_style_1.$switchOffColor
+            });
+            if (this.left) {
+                this.left.setStyleObj({
+                    color: var_1.$colors.primary.base
+                });
+            }
+            if (this.right) {
+                this.right.setStyleObj({
+                    color: var_1.$colors.default.base
+                });
+            }
+            if ((_m = this.config) === null || _m === void 0 ? void 0 : _m.inlinePrompt) {
+                this.core.setInnerChecked(false);
+            }
+            if ((_o = this.config) === null || _o === void 0 ? void 0 : _o.inactiveActionIcon) {
+                (_p = this.core.actionIcon) === null || _p === void 0 ? void 0 : _p.replaceSvg(this.config.inactiveActionIcon);
+            }
+            else if ((_q = this.config) === null || _q === void 0 ? void 0 : _q.inactiveActionText) {
+                (_s = (_r = this.core.actionSpan) === null || _r === void 0 ? void 0 : _r.textNode) === null || _s === void 0 ? void 0 : _s.setText(this.config.inactiveActionText);
+            }
+        }
+    }
+    switchValue() {
+        console.log('switchValue . ');
+        const config = this.config;
+        if ((config === null || config === void 0 ? void 0 : config.loading) || (config === null || config === void 0 ? void 0 : config.disabled)) {
+            return;
+        }
+        const beforeChange = config === null || config === void 0 ? void 0 : config.beforeChange;
+        if (!beforeChange) {
+            this.handleChange();
+            return;
+        }
+        const shouldChange = beforeChange();
+        const isPromiseOrBool = [
+            (0, utils_1.isPromise)(shouldChange),
+            (0, utils_1.isBoolean)(shouldChange)
+        ].includes(true);
+        if (!isPromiseOrBool) {
+            // throwError(
+            //   COMPONENT_NAME,
+            //   'beforeChange must return type `Promise<boolean>` or `boolean`'
+            // )
+            console.error('beforeChange must return type `Promise<boolean>` or `boolean`');
+        }
+        if ((0, utils_1.isPromise)(shouldChange)) {
+            shouldChange
+                .then((result) => {
+                if (result) {
+                    this.handleChange();
+                }
+            })
+                .catch((e) => {
+                // debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)
+                console.error(`some error occurred: ${e}`);
+            });
+        }
+        else if (shouldChange) {
+            this.handleChange();
+        }
+    }
+}
+exports.TdSwitch = TdSwitch;

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

@@ -0,0 +1,97 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeSvgSvg } from '@type-dom/framework';
+export interface ITdSwitch extends IUI {
+    className: 'TdSwitch';
+}
+export interface ITdSwitchConfig extends IUIConfig {
+    /**
+     * @description binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type
+     * default: false
+     */
+    modelValue?: boolean | number | string;
+    /**
+     * @description whether Switch is disabled
+     * default false
+     */
+    disabled?: boolean;
+    /**
+     * @description whether Switch is in loading state
+     * default false
+     */
+    loading?: boolean;
+    /**
+     * @description size of Switch
+     */
+    size?: 'large' | 'default' | 'small';
+    /**
+     * @description width of Switch
+     */
+    width?: number | string;
+    /**
+     * @description whether icon or text is displayed inside dot, only the first character will be rendered for text
+     * default false
+     */
+    inlinePrompt?: boolean;
+    /**
+     * @description component of the icon displayed in action when in `off` state
+     */
+    inactiveActionIcon?: TypeSvgSvg;
+    /**
+     * @description component of the icon displayed in action when in `on` state
+     */
+    activeActionIcon?: TypeSvgSvg;
+    /**
+     * @description component of the icon displayed when in `on` state, overrides `active-text`
+     */
+    activeIcon?: TypeSvgSvg;
+    /**
+     * @description component of the icon displayed when in `off` state, overrides `inactive-text`
+     */
+    inactiveIcon?: TypeSvgSvg;
+    /**
+     * @description text displayed when in `on` state
+     */
+    activeText?: string;
+    /**
+     * @description text displayed when in `off` state
+     */
+    inactiveText?: string;
+    /**
+     * @description switch value when in `on` state
+     * default true
+     */
+    activeValue?: boolean | string | number;
+    /**
+     * @description switch value when in `off` state
+     */
+    inactiveValue?: boolean | string | number;
+    /**
+     * @description input name of Switch
+     */
+    name?: string;
+    /**
+     * @description whether to trigger form validation
+     *     default: true
+     */
+    validateEvent?: boolean;
+    /**
+     * @description before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching
+     */
+    /**
+     * @description id for input
+     */
+    id?: string;
+    /**
+     * @description tabindex for input
+     */
+    tabindex?: string | number;
+    /**
+     * @description native input aria-label
+     */
+    label?: string;
+    switchOnColor?: string;
+    switchOffColor?: string;
+    activeActionText?: string;
+    inactiveActionText?: string;
+    beforeChange?: () => boolean;
+}

package/src/components/form/td-switch/td-switch.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,47 @@
+import { StyleCursor } from '@type-dom/framework';
+export declare const $switchOnColor: string;
+export declare const $switchOffColor: string;
+export declare const $switchBorderColor: string;
+export declare const $switchHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $switchFontSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $switchCoreBorderRadius: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $switchCoreWidth: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $switchCoreHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $switchButtonSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $switchContentPadding: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $switchLabel: {
+    transition: string;
+    display: string;
+    fontWeight: string;
+    cursor: StyleCursor;
+    verticalAlign: string;
+    color: string;
+};

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$switchLabel = exports.$switchContentPadding = exports.$switchButtonSize = exports.$switchCoreHeight = exports.$switchCoreWidth = exports.$switchCoreBorderRadius = exports.$switchFontSize = exports.$switchHeight = exports.$switchBorderColor = exports.$switchOffColor = exports.$switchOnColor = void 0;
+const var_1 = require("../../../styles/var");
+const framework_1 = require("@type-dom/framework");
+exports.$switchOnColor = var_1.$colors.primary.base;
+// -switch-on-color: var(--el-color-primary);
+exports.$switchOffColor = var_1.$borderColor.base;
+// --el-switch-off-color: var(--el-border-color);
+exports.$switchBorderColor = var_1.$borderColor.base;
+exports.$switchHeight = {
+    large: '40px',
+    default: '32px',
+    small: '24px'
+};
+exports.$switchFontSize = {
+    large: '14px',
+    default: '14px',
+    small: '12px'
+};
+exports.$switchCoreBorderRadius = {
+    large: '12px',
+    default: '10px',
+    small: '8px'
+};
+exports.$switchCoreWidth = {
+    large: '50px',
+    default: '40px',
+    small: '30px'
+};
+exports.$switchCoreHeight = {
+    large: '24px',
+    default: '20px',
+    small: '16px'
+};
+exports.$switchButtonSize = {
+    large: '20px',
+    default: '16px',
+    small: '12px'
+};
+exports.$switchContentPadding = {
+    large: '6px',
+    default: '4px',
+    small: '2px'
+};
+exports.$switchLabel = {
+    // transition: getCssVar('transition-duration-fast'),
+    transition: var_1.$transitionDurationFast,
+    // height: map.get($switch-core-height, 'default'),
+    display: 'inline-flex',
+    // font-size: map.get($switch-font-size, 'default'),
+    fontWeight: exports.$switchFontSize['default'],
+    cursor: framework_1.StyleCursor.pointer,
+    verticalAlign: 'middle',
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary
+};

package/src/components/form/td-switch/widget/td-switch-core.d.ts

@@ -0,0 +1,17 @@
+import { Div, Span, TypeSpan } from '@type-dom/framework';
+import { TdIcon } from '../../../basic/td-icon/td-icon.class';
+import { ITdSwitchConfig } from '../td-switch.interface';
+import { TdSwitch } from '../td-switch.class';
+export declare class TdSwitchCore extends TypeSpan {
+    className: 'TdSwitchCore';
+    action: Div;
+    parent?: TdSwitch;
+    config?: ITdSwitchConfig;
+    inner?: Div;
+    private innerText?;
+    private innerIcon?;
+    actionIcon?: TdIcon;
+    actionSpan?: Span;
+    constructor(config?: ITdSwitchConfig);
+    setInnerChecked(checked: boolean): void;
+}

package/src/components/form/td-switch/widget/td-switch-core.js

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSwitchCore = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const var_1 = require("../../../../styles/var");
+const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
+const td_switch_style_1 = require("../td-switch.style");
+class TdSwitchCore extends framework_1.TypeSpan {
+    constructor(config) {
+        super();
+        this.config = config;
+        this.className = 'TdSwitchCore';
+        this.addAttrObj({
+            name: 'switch-core'
+        });
+        this.addStyleObj({
+            display: 'inline-flex',
+            position: 'relative',
+            alignItems: 'center',
+            // border: '1px solid var(--el-switch-border-color, var(--el-switch-off-color))',
+            border: '1px solid ' + td_switch_style_1.$switchBorderColor,
+            outline: 'none',
+            borderRadius: '10px',
+            boxSizing: 'border-box',
+            background: td_switch_style_1.$switchOffColor, // 'var(--el-switch-off-color)',
+            // backgroundColor: $switchOnColor,
+            cursor: framework_1.StyleCursor.pointer,
+            // transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
+            transition: var_1.$borderColor.base + ' ' + var_1.$transitionDuration + ', background-color ' + var_1.$transitionDuration,
+            // minWidth: map.get($switch-core-width, 'default');
+            minWidth: td_switch_style_1.$switchCoreWidth[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+            // height: map.get($switch-core-height, 'default');
+            height: td_switch_style_1.$switchCoreHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+        });
+        if (config === null || config === void 0 ? void 0 : config.inlinePrompt) {
+            this.inner = new framework_1.Div({
+                attrObj: {
+                    name: 'switch-inner'
+                },
+                styleObj: {
+                    width: '100%',
+                    // transition: all getCssVar('transition-duration'),
+                    transition: 'all ' + var_1.$transitionDuration,
+                    // height: map.get($switch-button-size, 'default'),
+                    height: td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                    // padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
+                    //     $switch-button-size,
+                    //     'default'
+                    //   )} + 2px);
+                    padding: '0 ' + td_switch_style_1.$switchContentPadding[(config === null || config === void 0 ? void 0 : config.size) || 'default'] + ' 0 calc(' + td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'] + ' + 2px)'
+                }
+            });
+            this.addChild(this.inner);
+            if ((config === null || config === void 0 ? void 0 : config.activeIcon) || (config === null || config === void 0 ? void 0 : config.inactiveIcon)) {
+                this.innerIcon = new td_icon_class_1.TdIcon({
+                    svgObj: (config === null || config === void 0 ? void 0 : config.modelValue) === (config === null || config === void 0 ? void 0 : config.activeValue) ? config === null || config === void 0 ? void 0 : config.activeIcon : config === null || config === void 0 ? void 0 : config.inactiveIcon,
+                    attrObj: {
+                        name: 'switch-inner-icon'
+                    },
+                    styleObj: {
+                        fontSize: '12px', // $fontSizes.base,
+                        // color: var(--el-color-white),
+                        color: var_1.$colorWhite,
+                        userSelect: 'none',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap'
+                    }
+                });
+                this.inner.addChild(this.innerIcon);
+            }
+            else if ((config === null || config === void 0 ? void 0 : config.activeText) || (config === null || config === void 0 ? void 0 : config.inactiveText)) {
+                this.innerText = new framework_1.Span({
+                    text: (config === null || config === void 0 ? void 0 : config.modelValue) === (config === null || config === void 0 ? void 0 : config.activeValue) ? config === null || config === void 0 ? void 0 : config.activeText : config === null || config === void 0 ? void 0 : config.inactiveText,
+                    attrObj: {
+                        name: 'switch-inner-text'
+                    },
+                    styleObj: {
+                        // fontSize: $switchFontSize[config?.size || 'default'],
+                        fontSize: '12px', // $fontSizes.base,
+                        // color: var(--el-color-white),
+                        color: var_1.$colorWhite,
+                        userSelect: 'none',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap'
+                    }
+                });
+                this.inner.addChild(this.innerText);
+            }
+        }
+        this.action = new framework_1.Div({
+            attrObj: {
+                name: 'switch-action'
+            },
+            styleObj: {
+                position: 'absolute',
+                left: '1px',
+                // left: 'calc(100% - 17px)',
+                // borderRadius: var(--el-border-radius-circle),
+                borderRadius: var_1.$borderRadius.circle,
+                // transition: all var(--el-transition-duration),
+                transition: 'all ' + var_1.$transitionDuration,
+                width: td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                // width: map.get($switch-button-size, 'default');
+                height: td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                // height: map.get($switch-button-size, 'default');
+                // backgroundColor: var(--el-color-white),
+                backgroundColor: var_1.$colorWhite,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                // color: var(--el-switch-off-color),
+                color: td_switch_style_1.$switchOffColor
+            }
+        });
+        if (config === null || config === void 0 ? void 0 : config.loading) {
+            const loadingIcon = new td_icon_class_1.TdIcon({
+                svgObj: new svgs_1.ElLoadingSvg(),
+                attrObj: {
+                    name: 'switch-loading-icon'
+                },
+                loading: true
+            });
+            this.action.addChild(loadingIcon);
+        }
+        else if ((config === null || config === void 0 ? void 0 : config.modelValue) === (config === null || config === void 0 ? void 0 : config.activeValue)) {
+            this.action.addStyleObj({
+                color: td_switch_style_1.$switchOnColor
+            });
+            if (config === null || config === void 0 ? void 0 : config.activeActionIcon) {
+                this.actionIcon = new td_icon_class_1.TdIcon({
+                    svgObj: config.activeActionIcon,
+                    attrObj: {
+                        name: 'switch-action-icon'
+                    }
+                });
+                this.action.addChild(this.actionIcon);
+            }
+            else if (config === null || config === void 0 ? void 0 : config.activeActionText) {
+                this.actionSpan = new framework_1.Span({
+                    text: config.activeActionText,
+                    attrObj: {
+                        name: 'switch-action-text'
+                    }
+                });
+                this.action.addChild(this.actionSpan);
+            }
+        }
+        else if ((config === null || config === void 0 ? void 0 : config.modelValue) !== (config === null || config === void 0 ? void 0 : config.activeValue)) {
+            if (config === null || config === void 0 ? void 0 : config.inactiveActionIcon) {
+                this.actionIcon = new td_icon_class_1.TdIcon({
+                    svgObj: config.inactiveActionIcon,
+                    attrObj: {
+                        name: 'switch-action-icon'
+                    }
+                });
+                this.action.addChild(this.actionIcon);
+            }
+            else if (config === null || config === void 0 ? void 0 : config.inactiveActionText) {
+                this.actionSpan = new framework_1.Span({
+                    text: config.inactiveActionText,
+                    attrObj: {
+                        name: 'switch-action-text'
+                    }
+                });
+                this.action.addChild(this.actionSpan);
+            }
+        }
+        this.addChild(this.action);
+    }
+    setInnerChecked(checked) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        if (checked) {
+            (_a = this.inner) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+                // padding: 0 calc(#{map.get($switch-button-size, 'default')} + 2px) 0 #{map.get(
+                //   $switch-content-padding,
+                //   'default'
+                // )};
+                padding: '0 ' + 'calc(' + td_switch_style_1.$switchButtonSize[((_b = this.config) === null || _b === void 0 ? void 0 : _b.size) || 'default'] + ' + 2px)' + '0 ' +
+                    td_switch_style_1.$switchContentPadding[((_c = this.config) === null || _c === void 0 ? void 0 : _c.size) || 'default']
+            });
+            if (((_d = this.config) === null || _d === void 0 ? void 0 : _d.activeIcon) || ((_e = this.config) === null || _e === void 0 ? void 0 : _e.inactiveIcon)) {
+                (_f = this.innerIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.config.activeIcon);
+            }
+            else if (((_g = this.config) === null || _g === void 0 ? void 0 : _g.activeText) || ((_h = this.config) === null || _h === void 0 ? void 0 : _h.inactiveText)) {
+                (_k = (_j = this.innerText) === null || _j === void 0 ? void 0 : _j.textNode) === null || _k === void 0 ? void 0 : _k.setText(((_l = this.config) === null || _l === void 0 ? void 0 : _l.activeText) || '');
+            }
+        }
+        else {
+            (_m = this.inner) === null || _m === void 0 ? void 0 : _m.setStyleObj({
+                // padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
+                //   $switch-button-size,
+                //   'default'
+                // )} + 2px);
+                padding: '0 ' + td_switch_style_1.$switchContentPadding[((_o = this.config) === null || _o === void 0 ? void 0 : _o.size) || 'default'] + ' 0 calc(' + td_switch_style_1.$switchButtonSize[((_p = this.config) === null || _p === void 0 ? void 0 : _p.size) || 'default'] + ' + 2px)'
+            });
+            if (((_q = this.config) === null || _q === void 0 ? void 0 : _q.activeIcon) || ((_r = this.config) === null || _r === void 0 ? void 0 : _r.inactiveIcon)) {
+                (_s = this.innerIcon) === null || _s === void 0 ? void 0 : _s.replaceSvg(this.config.inactiveIcon);
+            }
+            else if (((_t = this.config) === null || _t === void 0 ? void 0 : _t.activeText) || ((_u = this.config) === null || _u === void 0 ? void 0 : _u.inactiveText)) {
+                (_w = (_v = this.innerText) === null || _v === void 0 ? void 0 : _v.textNode) === null || _w === void 0 ? void 0 : _w.setText(((_x = this.config) === null || _x === void 0 ? void 0 : _x.inactiveText) || '');
+            }
+        }
+    }
+}
+exports.TdSwitchCore = TdSwitchCore;

package/src/components/form/td-switch/widget/td-switch-left.d.ts

@@ -0,0 +1,7 @@
+import { TypeSpan } from '@type-dom/framework';
+import { ITdSwitchConfig } from '../td-switch.interface';
+export declare class TdSwitchLeft extends TypeSpan {
+    className: 'TdSwitchLeft';
+    config?: ITdSwitchConfig;
+    constructor(config?: ITdSwitchConfig);
+}