@type-dom/ui 0.0.6 → 0.0.7

package/src/components/feedback/td-dialog/td-dialog.class.js

@@ -5,8 +5,9 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_dialog_content_class_1 = require("../td-dialog-content/td-dialog-content.class");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
+const event_1 = require("../../../constants/event");
 class TdDialog extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         console.log('TdDialog . ');
         this.className = 'TdDialog';
@@ -33,12 +34,15 @@ class TdDialog extends ui_abstract_1.UI {
                     emits: {
                         afterEnter: () => {
                             console.log('afterEnter . ');
+                            this.afterEnter();
                         },
                         afterLeave: () => {
                             console.log('afterLeave . ');
+                            this.afterLeave();
                         },
                         beforeLeave: () => {
                             console.log('beforeLeave . ');
+                            this.beforeLeave();
                         }
                     },
                     slot: this.overlay,
@@ -66,5 +70,18 @@ class TdDialog extends ui_abstract_1.UI {
         //   close()
         // }
     }
+    afterEnter() {
+        this.emit('opened');
+    }
+    afterLeave() {
+        this.emit('closed');
+        this.emit(event_1.UPDATE_MODEL_EVENT, false);
+        if (this.props.destroyOnClose) {
+            this.rendered = false;
+        }
+    }
+    beforeLeave() {
+        this.emit('close');
+    }
 }
 exports.TdDialog = TdDialog;

package/src/components/feedback/td-dialog/td-dialog.interface.d.ts

@@ -1,5 +1,6 @@
 import { IUI } from '../../../ui/ui.interface';
 import { ITdDialogContentConfig } from '../td-dialog-content/td-dialog-content.interface';
+import { UPDATE_MODEL_EVENT } from '../../../constants/event';
 export interface ITdDialog extends IUI {
     className: 'TdDialog';
 }
@@ -76,4 +77,22 @@ export interface ITdDialogConfig extends ITdDialogContentConfig {
      *     default: '2',
      */
     headerAriaLevel?: string;
+    emits?: {
+        open?: () => void;
+        opened?: () => void;
+        close?: () => void;
+        closed?: () => void;
+        [UPDATE_MODEL_EVENT]?: (value: boolean) => void;
+        openAutoFocus?: () => void;
+        closeAutoFocus?: () => void;
+    };
 }
+export declare const dialogEmits: {
+    open: () => boolean;
+    opened: () => boolean;
+    close: () => boolean;
+    closed: () => boolean;
+    "update:modelValue": (value: boolean) => boolean;
+    openAutoFocus: () => boolean;
+    closeAutoFocus: () => boolean;
+};

package/src/components/feedback/td-dialog/td-dialog.interface.js

@@ -1,2 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogEmits = void 0;
+const event_1 = require("../../../constants/event");
+const utils_1 = require("@type-dom/utils");
+exports.dialogEmits = {
+    open: () => true,
+    opened: () => true,
+    close: () => true,
+    closed: () => true,
+    [event_1.UPDATE_MODEL_EVENT]: (value) => (0, utils_1.isBoolean)(value),
+    openAutoFocus: () => true,
+    closeAutoFocus: () => true,
+};

package/src/components/feedback/td-dialog-content/td-dialog-content.class.js

@@ -7,7 +7,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_dialog_style_1 = require("../td-dialog/td-dialog.style");
 class TdDialogContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c;
         super(params);
         this.className = 'TdDialogContent';

package/src/components/feedback/td-drawer/td-drawer.class.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 class TdDrawer extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdDrawer';
         this.transition = new framework_1.Transition({

package/src/components/feedback/td-drawer/td-drawer.interface.d.ts

@@ -4,9 +4,9 @@ export interface ITdDrawer extends IUI {
     className: 'TdDrawer';
 }
 export interface ITdDrawerConfig extends ITdDialogConfig {
-    direction: 'ltr' | 'rtl' | 'ttb' | 'btt';
-    size: string | number;
-    withHeader: boolean;
-    modalFade: boolean;
-    headerAriaLevel: string;
+    direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
+    size?: string | number;
+    withHeader?: boolean;
+    modalFade?: boolean;
+    headerAriaLevel?: string;
 }

package/src/components/feedback/td-focus-trap/td-focus-trap.class.js

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const aria_1 = require("../../../aria");
 const utils_1 = require("./utils");
 class TdFocusTrap extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdFocusTrap';
         this.inheritAttrs = false;

package/src/components/feedback/td-focus-trap/td-focus-trap.interface.d.ts

@@ -8,12 +8,12 @@ export interface ITdFocusTrapConfig extends IUIConfig {
     trapped?: boolean;
     focusTrapEl?: HTMLElement;
     focusStartEl?: 'container' | 'first' | HTMLElement;
-    emits: {
+    emits?: {
         [ON_TRAP_FOCUS_EVT]?: () => void;
         [ON_RELEASE_FOCUS_EVT]?: () => void;
-        focusin: () => void;
-        focusout: () => void;
-        focusoutPrevented: () => void;
-        releaseRequested: () => void;
+        focusin?: () => void;
+        focusout?: () => void;
+        focusoutPrevented?: () => void;
+        releaseRequested?: () => void;
     };
 }

package/src/components/feedback/td-loading/td-loading.class.js

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 class TdLoading extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdLoading';
         this.transition = new framework_1.Transition({

package/src/components/feedback/td-message/td-message.class.js

@@ -59,7 +59,7 @@ class TdMessage extends ui_abstract_1.UI {
         });
         // this.message.ctrl.hide();
         // this.transition.setSlot(this.message);
-        this.transition.slotChild(this.message);
+        this.transition.addSlot(this.message);
         const type = (params === null || params === void 0 ? void 0 : params.type) || 'info';
         const iconComponent = (params === null || params === void 0 ? void 0 : params.icon) || (new svgs_1.TypeComponentsMap[type]()) || '';
         console.log('iconComponent', iconComponent);
@@ -215,7 +215,6 @@ class TdMessage extends ui_abstract_1.UI {
         this.visible = false;
         this.message.ctrl.hide();
         this.clearTimer();
-        this.destroy();
         TdMessage.msgId = (TdMessage.msgId || 1) - 1;
         TdMessage.msgList = TdMessage.msgList.filter(item => item !== this);
         console.log('TdMessage.msgList is ', TdMessage.msgList, TdMessage.msgList.length);
@@ -226,6 +225,7 @@ class TdMessage extends ui_abstract_1.UI {
             };
             msg.message.ctrl.setStyleObj(customStyle);
         });
+        this.destroy();
     }
     keydown({ code }) {
         if (code === aria_1.EVENT_CODE.esc) {

package/src/components/feedback/td-message-box/td-message-box.class.js

@@ -11,7 +11,7 @@ const td_input_class_1 = require("../../form/td-input/td-input.class");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 const td_message_box_style_1 = require("./td-message-box.style");
 class TdMessageBox extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b;
         super(params, 'fragment');
         this.handleInputEnter = (e) => {
@@ -83,7 +83,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             // styleObj: $messageBoxStyle,
         });
         this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
-        this.transition.slotNode.addSlot(this.overlay);
+        this.transition.addSlot(this.overlay);
         this.dialog = new framework_1.Div({
             name: 'message-box-overlay',
             attrObj: {

package/src/components/feedback/td-notification/td-notification.class.js

@@ -57,7 +57,7 @@ class TdNotification extends ui_abstract_1.UI {
                 },
             },
         });
-        this.transition.addChild(this.notification);
+        this.transition.addSlot(this.notification);
         let iconComponent;
         if ((params === null || params === void 0 ? void 0 : params.type) && svgs_1.TypeComponentsMap[params.type]) {
             console.log('params.type is ', params.type);
@@ -194,7 +194,6 @@ class TdNotification extends ui_abstract_1.UI {
         this.visible = false;
         this.notification.ctrl.hide();
         const position = this.props.position || 'top-right';
-        this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；  会删除props
         TdNotification.notifications[position] = TdNotification.notifications[position].filter((notification) => notification !== this);
         TdNotification.notifyId = TdNotification.notifyId - 1;
         let verticalOffset = this.props.offset || 0;
@@ -206,6 +205,7 @@ class TdNotification extends ui_abstract_1.UI {
             });
             verticalOffset += item.notification.dom.offsetHeight; // + this.GAP_SIZE;
         });
+        this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；  会删除props
     }
     onKeydown({ code }) {
         console.log('onKeydown ', code);

package/src/components/feedback/td-overlay/td-overlay.class.js

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_overlay_style_1 = require("./td-overlay.style");
 exports.overlayZIndex = 2000;
 class TdOverlay extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         exports.overlayZIndex = exports.overlayZIndex + 1;
         this.className = 'TdOverlay';

package/src/components/feedback/td-popper/arrow/arrow.class.js

@@ -4,7 +4,7 @@ exports.TdPopperArrow = void 0;
 const var_1 = require("../../../../styles/var");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdPopperArrow extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdPopperArrow';
         this.ctrl.addAttrName('td-popper-arrow');

package/src/components/feedback/td-popper/content/content.class.js

@@ -4,7 +4,7 @@ exports.TdPopperContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
 class TdPopperContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdPopperContent';
         this.ctrl.addAttrName('td-popper-content');

package/src/components/feedback/td-popper/td-popper.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopper = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdPopper extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdPopper';
         this.props = this.setParams(params);

package/src/components/feedback/td-popper/trigger/trigger.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdPopperTrigger extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdPopperTrigger';
         this.props = this.setParams(params);

package/src/components/feedback/td-tooltip/content/content.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipContent';
         this.props = this.setParams(params);

package/src/components/feedback/td-tooltip/td-tooltip.class.js

@@ -8,7 +8,7 @@ const arrow_class_1 = require("../td-popper/arrow/arrow.class");
 const trigger_class_1 = require("./trigger/trigger.class");
 const content_class_1 = require("./content/content.class");
 class TdTooltip extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltip';
         this.trigger = new trigger_class_1.TdTooltipTrigger();

package/src/components/feedback/td-tooltip/trigger/trigger.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipTrigger extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipTrigger';
         this.props = this.setParams(params);

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

@@ -4,7 +4,7 @@ exports.RadioGroup = void 0;
 const framework_1 = require("@type-dom/framework");
 const radio_option_class_1 = require("./radio-option/radio-option.class");
 class RadioGroup extends framework_1.TypeDiv {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'RadioGroup';
         this.ctrl.addAttrName('radio-group');

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

@@ -5,7 +5,7 @@ export interface IRadioGroup extends ITypeDiv {
     childNodes: IRadioOption[];
 }
 export interface IRadioGroupConfig extends ITypeConfig {
-    name: string;
-    options: IOptionConfig[];
+    name?: string;
+    options?: IOptionConfig[];
     value?: string | number;
 }

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

@@ -4,7 +4,7 @@ exports.RadioOption = void 0;
 const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class RadioOption extends framework_1.TypeSpan {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'RadioOption';
         this.ctrl.addStyleObj({

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

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_checkbox_style_1 = require("./td-checkbox.style");
 const use_checkbox_1 = require("./composables/use-checkbox");
 class TdCheckbox extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
         const tag = !hasOwnLabel ? 'span' : 'label';
         super(params, tag); // label | span

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

@@ -106,8 +106,8 @@ exports.$checkboxInnerStyle = {
     backgroundColor: var_1.$bgColor.default,
     // z-index: getCssVar('index-normal'),
     zIndex: var_1.$zIndex.normal,
-    transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
-      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+    transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
       outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46)`
 };
 exports.$checkboxInnerAfterStyle = {

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

@@ -7,7 +7,7 @@ const use_checkbox_1 = require("../td-checkbox/composables/use-checkbox");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
 const td_checkbox_button_style_1 = require("./td-checkbox-button.style");
 class TdCheckboxButton extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'label'); // label | span
         this.className = 'TdCheckboxButton';
         this.ctrl.addAttrObj({

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

@@ -4,7 +4,7 @@ exports.TdCheckboxGroup = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
 class TdCheckboxGroup extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdCheckboxGroup';
         this.ctrl.addAttrObj({

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

@@ -13,7 +13,7 @@ class TdForm extends ui_abstract_1.UI {
      * 构造函数，初始化表单配置。
      * @param params
      */
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'form');
         this.className = 'TdForm';
         this.ctrl.addAttrName('td-form');

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

@@ -10,7 +10,7 @@ const var_1 = require("../../../styles/var");
 const td_form_item_style_1 = require("./td-form-item.style");
 class TdFormItem extends ui_abstract_1.UI {
     // new TdFormItem 是 发生在 TdForm slotChild 之前的。
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdFormItem';
         this.ctrl.addAttrName('td-form-item');

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

@@ -9,7 +9,7 @@ const td_input_wrapper_class_1 = require("./widget/td-input-wrapper.class");
 const td_input_style_1 = require("./td-input.style");
 const td_textarea_wrapper_1 = require("./widget/td-textarea-wrapper");
 class TdInput extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         console.log('TdInput constructor . ');
         this.className = 'TdInput';

package/src/components/form/td-input/widget/td-input-wrapper.class.js

@@ -7,7 +7,7 @@ const td_input_style_1 = require("../td-input.style");
 const suffix_1 = require("./suffix");
 const prefix_1 = require("./prefix");
 class TdInputWrapper extends framework_1.TypeDiv {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdInputWrapper';
         this.parent = params === null || params === void 0 ? void 0 : params.parent;

package/src/components/form/td-input/widget/td-textarea-wrapper.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../../styles/var");
 const td_input_style_1 = require("../td-input.style");
 class TdTextareaWrapper extends framework_1.TypeDiv {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TextareaWrapper';
         this.ctrl.addStyleObj({

package/src/components/form/td-input/widget/utils.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calcTextareaHeight = calcTextareaHeight;
 const utils_1 = require("@type-dom/utils");
 let hiddenTextarea = undefined;
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
 `;
 const CONTEXT_STYLE = [
     'letter-spacing',

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

@@ -4,7 +4,7 @@ exports.TdOption = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_select_style_1 = require("../td-select/td-select.style");
 class TdOption extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'li');
         this.className = 'TdOption';
         this.ctrl.addAttrObj({

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

@@ -7,7 +7,7 @@ export interface ITdOptionConfig extends IUIConfig {
      * @description value of option
      *     required: true,
      */
-    value: string | number | boolean | object;
+    value?: string | number | boolean | object;
     /**
      * @description label of option, same as `value` if omitted
      */

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

@@ -5,7 +5,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'ul');
         this.className = 'TdOptionGroup';
         this.ctrl.addAttrObj({

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

@@ -6,7 +6,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'label');
         this.className = 'TdRadio';
         this.ctrl.addStyleObj({

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

@@ -6,7 +6,7 @@ const var_1 = require("../../../styles/var");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
 class TdRadioButton extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'label');
         this.className = 'TdRadioButton';
         this.ctrl.addAttrName('radio-button');

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

@@ -6,7 +6,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdRadioGroup';
         this.ctrl.addStyleObj({

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

@@ -6,7 +6,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdSelectDropdown';
         this.ctrl.addStyleObj({

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

@@ -7,7 +7,7 @@ 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 {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdSelect';
         this.ctrl.addStyleObj(td_select_style_1.$select);

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

@@ -11,7 +11,7 @@ const td_switch_left_1 = require("./widget/td-switch-left");
 const td_switch_right_1 = require("./widget/td-switch-right");
 const td_switch_style_1 = require("./td-switch.style");
 class TdSwitch extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super(params);
         this.className = 'TdSwitch';

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

@@ -7,7 +7,7 @@ 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(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdSwitchCore';
         this.ctrl.addAttrObj({

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

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 const td_switch_style_1 = require("../td-switch.style");
 class TdSwitchLeft extends framework_1.TypeSpan {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdSwitchLeft';
         this.ctrl.addAttrName('switch-label');

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

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const td_switch_style_1 = require("../td-switch.style");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 class TdSwitchRight extends framework_1.TypeSpan {
-    constructor(params) {
+    constructor(params = {}) {
         super();
         this.className = 'TdSwitchRight';
         this.ctrl.addStyleObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginLeft: '10px' }));

package/src/components/navigation/td-affix/td-affix.class.js

@@ -6,7 +6,7 @@ const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdAffix extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         console.log('TdAffix constructor . ');
         this.className = 'TdAffix';

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.js

@@ -4,7 +4,7 @@ exports.TdAnchorLink = void 0;
 const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdAnchorLink extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdAnchorLink';
         this.href = new framework_1.A({

package/src/components/navigation/td-anchor/td-anchor.class.d.ts

@@ -5,6 +5,6 @@ export declare class TdAnchor extends UI implements ITdAnchor {
     props: ITdAnchorConfig;
     private marker?;
     private list?;
-    constructor(params: ITdAnchorConfig);
+    constructor(params?: ITdAnchorConfig);
     handleClick(e: MouseEvent, href?: string): void;
 }

package/src/components/navigation/td-anchor/td-anchor.class.js

@@ -6,7 +6,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_anchor_style_1 = require("./td-anchor.style");
 const td_anchor_function_1 = require("./td-anchor.function");
 class TdAnchor extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b, _c, _d;
         super(params);
         this.className = 'TdAnchor';