@type-dom/ui 0.0.8 → 0.0.10

package/src/components/form/field-item/options/field-options.abstract.js

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PropertyOptions = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 const field_select_class_1 = require("../../../form/field-select/field-select.class");
 const field_item_abstract_1 = require("../field-item.abstract");
 const field_item_style_1 = require("../field-item.style");
 class PropertyOptions extends field_item_abstract_1.FieldItem {
+    // optionsConfigObservable: Observable<Event>;
     constructor(labelText = '选项列表') {
         super(labelText);
-        this.ctrl.addAttrName('option-property');
+        this.attr.addName('option-property');
         this.selectConfigDiv = new framework_1.Div();
-        this.selectConfigDiv.ctrl.addAttrName('select-config');
-        this.selectConfigDiv.ctrl.addStyleObj({
+        this.selectConfigDiv.attr.addName('select-config');
+        this.selectConfigDiv.style.addObj({
             height: '100%',
             lineHeight: '32px',
             textAlign: 'center',
@@ -31,20 +31,20 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             width: 'calc(100% - 100px)'
         });
         this.selectDiv = new framework_1.Div();
-        this.selectDiv.ctrl.addStyleObj({
+        this.selectDiv.style.addObj({
             display: 'flex',
             flexDirection: 'row'
         });
         // 单独的方法实现
         this.selectObj = new field_select_class_1.FieldSelect();
-        this.selectObj.ctrl.addAttrName('select');
-        this.selectObj.ctrl.addStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+        this.selectObj.attr.addName('select');
+        this.selectObj.style.addObj(Object.assign({}, field_item_style_1.itemContentStyle, {
             width: '100%',
             borderRadius: '4px 0 0 4px',
             borderRight: 'none'
         }));
         this.btn = new framework_1.Button({ parent: this.selectDiv });
-        this.btn.ctrl.addStyleObj({
+        this.btn.style.addObj({
             // position: 'absolute',
             // right: '10px',
             padding: '8px 3px 4px',
@@ -59,13 +59,13 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         this.selectDiv.childNodes = [this.selectObj, this.btn];
         this.firstDiv = new framework_1.Div();
         const labelDiv = new framework_1.Div();
-        labelDiv.ctrl.addStyleObj({
+        labelDiv.style.addObj({
             display: 'inline-block',
             width: '50%'
         });
         labelDiv.addChild(new framework_1.TextNode('标签'));
         const valueDiv = new framework_1.Div();
-        valueDiv.ctrl.addStyleObj({
+        valueDiv.style.addObj({
             display: 'inline-block',
             width: '50%'
         });
@@ -77,7 +77,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             this.firstDiv,
             this.optionsContent
         ];
-        this.button.ctrl.addStyleObj({
+        this.button.style.addObj({
             position: 'absolute',
             right: '10px',
             padding: '8px 3px 4px',
@@ -90,7 +90,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         this.childNodes = [this.label, this.selectConfigDiv, this.button];
         // 创建添加按钮
         // this.addDiv = new Div(this.selectConfigDiv);
-        // this.addDiv.ctrl.setStyleObj({
+        // this.addDiv.style.setObj({
         //   textAlign: 'center',
         //   marginTop: '-10px',
         //   display: 'none', // 现在不需要动态添加选项。
@@ -98,7 +98,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         // const svg = new AddSvg({ parent: this.addDiv });
         // svg.addAttribute('width', '24px');
         // this.addDiv.addChild(svg);
-        this.optionsConfigObservable = (0, rxjs_1.fromEvent)(this.btn.dom, 'click');
+        // this.optionsConfigObservable = fromEvent(this.btn.dom, 'click');
     }
     get optionSetting() {
         var _a;
@@ -122,10 +122,11 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         }
     }
     resetOptionSettingResultValue(value) {
-        // AppRoot.selectedControl?.attrObj.optionSetting''
+        // AppRoot.selectedControl?.attr.get('optionSetting')''
         // this.optionSetting = Object.assign(this.optionSetting, { resultValue: value });
-        if (this.optionSetting)
+        if (this.optionSetting) {
             this.optionSetting.resultValue = value;
+        }
     }
     // vue项目中返回的是选中的项目。只有一层，没有两层。
     resetConfig(optionSetting) {
@@ -152,23 +153,23 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         selectedOption.options.forEach((opt, optIndex) => {
             const optDiv = new framework_1.Div();
             const labelDiv = new framework_1.Div();
-            labelDiv.ctrl.addStyleObj(styleObj);
-            labelDiv.ctrl.setAttrObj({
+            labelDiv.style.addObj(styleObj);
+            labelDiv.attr.setObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
             const valueDiv = new framework_1.Div();
-            valueDiv.ctrl.addStyleObj(styleObj);
-            valueDiv.ctrl.addAttrObj({
+            valueDiv.style.addObj(styleObj);
+            valueDiv.attr.addObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'value'
             });
             valueDiv.addChild(new framework_1.TextNode(String(opt.value)));
             // const deleteDiv = new Div(optDiv);
-            // deleteDiv.ctrl.setStyleObj({
+            // deleteDiv.style.setObj({
             //   display: 'none',
             //   // display: 'inline-block', // 现在不需要动态删除选项
             //   width: '10%',
@@ -178,7 +179,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             //   // marginTop: '10px',
             // });
             // const svg = new DeleteSvg(deleteDiv);
-            // svg.ctrl.setStyleObj({
+            // svg.style.setObj({
             //   width: '20',
             // });
             // deleteDiv.appendChild(svg);
@@ -201,18 +202,18 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         // config.options设置
         options.forEach((opt, optIndex) => {
             const optDiv = new framework_1.Div();
-            optDiv.ctrl.setAttrName('option');
+            optDiv.attr.setName('option');
             const labelDiv = new framework_1.Div();
-            labelDiv.ctrl.addStyleObj(styleObj);
-            labelDiv.ctrl.setAttrObj({
+            labelDiv.style.addObj(styleObj);
+            labelDiv.attr.setObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
             const valueDiv = new framework_1.Div();
-            valueDiv.ctrl.addStyleObj(styleObj);
-            valueDiv.ctrl.addAttrObj({
+            valueDiv.style.addObj(styleObj);
+            valueDiv.attr.addObj({
                 optIndex,
                 optType: 'value'
             });
@@ -221,10 +222,11 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             this.optionsContent.appendChild(optDiv);
         });
     }
-    initEvents() {
-        this.optionsConfigObservable.subscribe(() => {
-            console.log('this.btn click . ');
-            console.log('this.optionsConfigObservable is ', this.optionsConfigObservable);
+    setup() {
+        this.btn.addEvents({
+            click: () => {
+                console.log('this.btn click . ');
+            }
         });
         this.selectObj.addEvents({
             change: () => {

package/src/components/form/field-item/radio/field-radio.abstract.d.ts

@@ -11,5 +11,5 @@ export declare abstract class FieldRadio extends FieldItem {
     abstract reset(value?: string): void;
     setOptions(options: IOptionSet[]): void;
     resetResultValue(value: string): void;
-    initEvents(): void;
+    mounted(): void;
 }

package/src/components/form/field-item/radio/field-radio.abstract.js

@@ -27,32 +27,28 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
             else {
                 button = this.optionDiv.childNodes[index];
             }
-            button.ctrl.addStyleObj({
+            button.style.addObj({
                 height: '32px',
                 borderRadius: '0',
                 border: '1px solid #000'
             });
-            button.ctrl.addAttrObj({
+            button.attr.addObj({
                 type: 'radio',
                 value: option.value,
                 checked: option.checked
             });
             if (option.checked) {
-                // button.styleObj.backgroundColor = '#00f';
-                // button.styleObj.color = '#fff';
-                button.ctrl.addStyleObj({
+                button.style.addObj({
                     backgroundColor: '#00f',
                     color: '#fff',
                 });
                 this.selectedOpt = button;
             }
             else {
-                button.ctrl.addStyleObj({
+                button.style.addObj({
                     backgroundColor: '#fff',
                     color: '#000'
                 });
-                // button.styleObj.backgroundColor = '#fff';
-                // button.styleObj.color = '#000';
             }
             // span.childNodes.push(label, inputRadio);
             // this.optionDiv.childNodes.push(button);
@@ -69,37 +65,38 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
         this.setOptions(this.params.options);
         this.optionDiv.mount();
     }
-    initEvents() {
+    mounted() {
         this.optionDiv.childNodes.forEach((btn) => {
             if (btn.dom === undefined) {
                 return;
             }
-            this.addEvent('click', btn.dom, () => {
-                var _a;
-                // if (OfdEditor.mode === 'read') {
-                //   return;
-                // }
-                if (this.selectedOpt) {
-                    this.selectedOpt.ctrl.setStyleObj({
-                        backgroundColor: '#fff',
-                        color: '#000'
-                    });
-                    this.selectedOpt.ctrl.setAttribute('checked', false);
-                }
-                this.selectedOpt = btn;
-                if (btn instanceof framework_1.TypeHtml) {
-                    btn.ctrl.setStyleObj({
-                        backgroundColor: '#00f',
-                        color: '#fff'
-                    });
-                    btn.ctrl.setAttribute('checked', true);
-                    this.resultValue = (_a = btn.props.attrObj) === null || _a === void 0 ? void 0 : _a.value;
-                    this.reset(this.resultValue);
-                }
-                else {
-                    return;
-                }
-            });
+            if (btn instanceof framework_1.TypeElement) {
+                btn.addEvent('click', () => {
+                    // if (OfdEditor.mode === 'read') {
+                    //   return;
+                    // }
+                    if (this.selectedOpt) {
+                        this.selectedOpt.style.setObj({
+                            backgroundColor: '#fff',
+                            color: '#000'
+                        });
+                        this.selectedOpt.attr.set('checked', false);
+                    }
+                    this.selectedOpt = btn;
+                    if (btn instanceof framework_1.TypeHtml) {
+                        btn.style.setObj({
+                            backgroundColor: '#00f',
+                            color: '#fff'
+                        });
+                        btn.attr.set('checked', true);
+                        this.resultValue = btn.attr.get('value');
+                        this.reset(this.resultValue);
+                    }
+                    else {
+                        return;
+                    }
+                });
+            }
         });
     }
 }

package/src/components/form/field-item/select/field-select.abstract.d.ts

@@ -7,5 +7,5 @@ export declare abstract class FieldSelect extends FieldItem {
     select: Select;
     mode: string;
     protected constructor(labelText?: string);
-    initEvents(): void;
+    setup(): void;
 }

package/src/components/form/field-item/select/field-select.abstract.js

@@ -9,20 +9,20 @@ class FieldSelect extends field_item_abstract_1.FieldItem {
         super(labelText);
         this.mode = 'editor';
         this.select = new select_class_1.Select();
-        this.select.props.styleObj = Object.assign({}, field_item_style_1.itemContentStyle);
-        this.select.props.attrObj = {
+        this.select.style.addObj(Object.assign({}, field_item_style_1.itemContentStyle));
+        this.select.attr.addObj({
             name: 'property-select'
             // type: 'text',
             // placeholder: placeholder,
-        };
+        });
         if (this.mode === 'read') {
-            this.select.ctrl.addAttrObj({
+            this.select.attr.addObj({
                 disabled: true
             });
         }
         this.childNodes = [this.label, this.select, this.button];
     }
-    initEvents() {
+    setup() {
         this.select.addEvents({
             click: (evt) => {
                 console.log('this.select.dom click, event is ', evt);

package/src/components/form/field-item/span/field-span.abstract.js

@@ -8,7 +8,7 @@ class FieldSpan extends field_item_abstract_1.FieldItem {
     constructor(labelText = '控件名称') {
         super(labelText);
         this.content = new framework_1.Span({ parent: this });
-        this.content.props.styleObj = {
+        this.content.style.addObj({
             height: '28px',
             lineHeight: '28px',
             textAlign: 'center',
@@ -27,13 +27,13 @@ class FieldSpan extends field_item_abstract_1.FieldItem {
             // -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
             transition: 'border-color .2s cubic-bezier(.645,.045,.355,1)',
             width: 'calc(100% - 80px)'
-        };
-        this.props.attrObj = {
+        });
+        this.attr.addObj({
             name: 'field-span'
-        };
+        });
         this.textNode = new framework_1.TextNode('显示');
         this.content.addChild(this.textNode);
-        this.button.ctrl.setStyleObj({
+        this.button.style.setObj({
             // position: 'absolute',
             // right: '10px',
             padding: '8px 3px 4px',

package/src/components/form/field-item/textarea/field-textarea.abstract.js

@@ -8,7 +8,7 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
     constructor(labelText = '控件名称', placeholder = '请输入') {
         super(labelText);
         this.mode = 'edit';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'block', // 不是 flex
             marginBottom: '20px'
         });
@@ -40,12 +40,12 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
         console.log('this.parent is ', this.parent);
         console.log('this.mode is ', this.mode);
         if (this.mode === 'read') {
-            this.content.ctrl.addAttrObj({
+            this.content.attr.addObj({
                 disabled: true
             });
         }
         this.button.textNode.setText('确定');
-        this.button.ctrl.addStyleObj({
+        this.button.style.addObj({
             height: '24px',
             float: 'right',
             display: 'block'
@@ -53,10 +53,10 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
         this.childNodes = [this.label, this.content, this.button];
     }
     resetInputPlaceholder(placeholder) {
-        this.content.ctrl.setAttribute('placeholder', placeholder);
+        this.content.attr.set('placeholder', placeholder);
     }
     resetInputValue(value = '') {
-        this.content.ctrl.setAttribute('value', value);
+        this.content.attr.set('value', value);
         this.content.dom.value = String(value);
     }
 }

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

@@ -8,5 +8,5 @@ export declare class FieldSelect extends TypeSelect implements IFieldSelect {
     constructor();
     setOptions(options: IOptionSet[], value: string | number | boolean): void;
     resetOptions(options: IOptionSet[], value: string | number | boolean): void;
-    initEvents(): void;
+    setup(): void;
 }

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

@@ -7,14 +7,14 @@ class FieldSelect extends framework_1.TypeSelect {
     constructor() {
         super();
         this.className = 'FieldSelect';
-        this.ctrl.addAttrName('td-select');
+        this.attr.addName('td-select');
         this.childNodes = [];
     }
     setOptions(options, value) {
         this.clearChildren();
         const firstOpt = new option_class_1.SelectOption();
         firstOpt.textNode.setText('请选择');
-        firstOpt.ctrl.addAttrObj({
+        firstOpt.attr.addObj({
             label: '请选择',
             value: 0
         });
@@ -22,7 +22,7 @@ class FieldSelect extends framework_1.TypeSelect {
         options.forEach((opt) => {
             const optObj = new option_class_1.SelectOption();
             optObj.textNode.setText(opt.label);
-            optObj.ctrl.addAttrObj({
+            optObj.attr.addObj({
                 label: opt.label,
                 value: opt.value
             });
@@ -31,12 +31,11 @@ class FieldSelect extends framework_1.TypeSelect {
             this.addChild(optObj);
         });
         this.childNodes.forEach((optObj) => {
-            var _a;
-            if (String((_a = optObj.props.attrObj) === null || _a === void 0 ? void 0 : _a.value).trim() === String(value).trim()) {
-                optObj.ctrl.addAttribute('selected', true);
+            if (String(optObj.attr.get('value')).trim() === String(value).trim()) {
+                optObj.attr.add('selected', true);
             }
             else {
-                // optObj.ctrl.removeAttribute('selected');
+                // optObj.attr.remove('selected');
             }
         });
         // console.error('this.dom.value is ', this.dom.value);
@@ -46,7 +45,7 @@ class FieldSelect extends framework_1.TypeSelect {
         this.mount(); // 需要单独渲染。
         // console.error('this.dom.value is ', this.dom.value);
     }
-    initEvents() {
+    setup() {
         this.addEvents({
             click: (evt) => {
                 console.log('this.select.dom click, event is ', evt);

package/src/components/form/field-select/option/option.class.js

@@ -6,9 +6,7 @@ class SelectOption extends framework_1.TypeOption {
     constructor() {
         super();
         this.className = 'SelectOption';
-        this.props.attrObj = {
-            name: 'option'
-        };
+        this.attr.addName('option');
         this.textNode = new framework_1.TextNode('一个选项');
         this.childNodes = [this.textNode];
     }

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

@@ -7,10 +7,10 @@ class RadioGroup extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'RadioGroup';
-        this.ctrl.addAttrName('radio-group');
+        this.attr.addName('radio-group');
         this.value = '';
         this.childNodes = [];
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
@@ -23,7 +23,7 @@ class RadioGroup extends framework_1.TypeDiv {
         const random = Math.random();
         options.forEach((opt) => {
             const optObj = new radio_option_class_1.RadioOption({ parent: this });
-            optObj.input.ctrl.addAttrObj({
+            optObj.input.attr.addObj({
                 name: 'radio' + random,
                 label: opt.label,
                 value: opt.value,
@@ -40,14 +40,13 @@ class RadioGroup extends framework_1.TypeDiv {
         this.value = value;
         // console.error('value is ', value);
         this.childNodes.forEach((opt) => {
-            var _a;
-            if (String((_a = opt.input.props.attrObj) === null || _a === void 0 ? void 0 : _a.value) === String(value)) {
-                opt.input.ctrl.setAttrObj({
+            if (String(opt.input.attr.get('value')) === String(value)) {
+                opt.input.attr.setObj({
                     checked: true
                 });
             }
             else {
-                opt.input.ctrl.removeAttribute('checked');
+                opt.input.attr.remove('checked');
             }
         });
     }

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

@@ -10,5 +10,4 @@ export declare class RadioOption extends TypeSpan implements IRadioOption {
     textNode: TextNode;
     constructor(params?: IRadioOptionConfig);
     setup(config?: IRadioOptionConfig): void;
-    initEvents(): void;
 }

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

@@ -6,11 +6,11 @@ class RadioOption extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
         this.className = 'RadioOption';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             padding: '0 5px'
         });
         this.input = new framework_1.Input({ parent: this });
-        this.input.ctrl.addAttrObj({
+        this.input.attr.addObj({
             type: 'radio'
             // name: optionSetting.name,
             // label: opt.label,
@@ -19,20 +19,18 @@ class RadioOption extends framework_1.TypeSpan {
         });
         this.textNode = new framework_1.TextNode('');
         this.childNodes = [this.input, this.textNode];
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup(config) {
         if (config === null || config === void 0 ? void 0 : config.name) {
-            this.input.ctrl.addAttrName(config.name);
+            this.input.attr.addName(config.name);
         }
         if (config === null || config === void 0 ? void 0 : config.value) {
-            this.input.ctrl.addAttrObj({ value: config.value });
+            this.input.attr.addObj({ value: config.value });
         }
         if (config === null || config === void 0 ? void 0 : config.checked) {
-            this.input.ctrl.addAttrObj({ checked: config.checked || false });
+            this.input.attr.addObj({ checked: config.checked || false });
         }
-    }
-    initEvents() {
         this.input.addEvents({
             click: () => {
                 console.log('this.input.dom click . ');

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

@@ -6,7 +6,7 @@ export declare class Select extends TypeSelect implements ISelect {
     value: string | number | boolean;
     constructor();
     setOptionSetting(optionSetting: IOptionSetting): void;
-    initEvents(): void;
+    setup(): void;
     jsSelectIsExitItem(objSelect: HTMLSelectElement, objItemValue: string): boolean;
     jsAddItemToSelect(objSelect: HTMLSelectElement, objItemText: string | undefined, objItemValue: string): void;
     jsRemoveItemFromSelect(objSelect: HTMLSelectElement, objItemValue: string): void;

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

@@ -13,7 +13,7 @@ class Select extends framework_1.TypeSelect {
         this.clearChildren();
         optionSetting.options.forEach((opt) => {
             const optionObj = new framework_1.Option({ parent: this });
-            optionObj.ctrl.setAttrObj({
+            optionObj.attr.setObj({
                 // label: opt.label,
                 value: opt.value,
                 selected: opt.selected || false
@@ -26,7 +26,7 @@ class Select extends framework_1.TypeSelect {
             this.addChild(optionObj);
         });
     }
-    initEvents() {
+    setup() {
         this.addEvents({
             click: () => {
                 console.log('this.dom click . ');
@@ -34,12 +34,12 @@ class Select extends framework_1.TypeSelect {
                 this.value = this.dom.value; // 对应的opt.label.
                 this.childNodes.forEach((opt) => {
                     if (opt.dom.value === this.dom.value) {
-                        opt.ctrl.setAttrObj({
+                        opt.attr.setObj({
                             selected: true
                         });
                     }
                     else {
-                        opt.ctrl.removeAttribute('selected');
+                        opt.attr.remove('selected');
                     }
                 });
             }

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

@@ -11,10 +11,10 @@ class TdCheckbox extends ui_abstract_1.UI {
         const tag = !hasOwnLabel ? 'span' : 'label';
         super(params, tag); // label | span
         this.className = 'TdCheckbox';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'td-checkbox'
         });
-        this.ctrl.addStyleObj(td_checkbox_style_1.$checkboxStyle);
+        this.style.addObj(td_checkbox_style_1.$checkboxStyle);
         const inputSpan = new framework_1.Span({
             attrObj: {
                 name: 'td-checkbox-input-span'
@@ -71,7 +71,7 @@ class TdCheckbox extends ui_abstract_1.UI {
             }
             this.addChild(labelSpan);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     handleChange(ev) {
         if (this.isLimitExceeded)

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

@@ -10,10 +10,10 @@ class TdCheckboxButton extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'label'); // label | span
         this.className = 'TdCheckboxButton';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'td-checkbox-button'
         });
-        this.ctrl.addStyleObj(td_checkbox_button_style_1.$checkboxButtonStyle);
+        this.style.addObj(td_checkbox_button_style_1.$checkboxButtonStyle);
         const { hasOwnLabel } = (0, use_checkbox_1.useCheckbox)(params);
         const original = new framework_1.Input({
             name: 'original',
@@ -53,7 +53,7 @@ class TdCheckboxButton extends ui_abstract_1.UI {
             }
             this.addChild(labelSpan);
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     handleChange(ev) {
         if (this.isLimitExceeded)