@dooboostore/dom-render/components/radio/Radio.js

html view template engine

import { ComponentBase } from '../ComponentBase';
import { DomRender } from '../../DomRender';
import { RawSet } from '../../rawsets/RawSet';
export var Radio;
(function (Radio_1) {
    Radio_1.selector = 'System:Radio';
    class RadioBase extends ComponentBase {
        constructor() {
            super(...arguments);
            this.hidden = true;
        }
    }
    // @Component({
    //   template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
    //   styles: '',
    //   selector: `${selector}.Checked`
    // })
    class Checked extends RadioBase {
        constructor() {
            super({ onlyParentType: Radio });
            this.name = 'Checked';
        }
    }
    Radio_1.Checked = Checked;
    // @Component({
    //   template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
    //   styles: '',
    //   selector: `${selector}.UnChecked`
    // })
    class UnChecked extends RadioBase {
        constructor() {
            super({ onlyParentType: Radio });
            this.name = 'unChecked';
        }
    }
    Radio_1.UnChecked = UnChecked;
    // @Component({
    //   template: template,
    //   styles: style,
    //   selector: `${selector}`
    // })
    class Radio extends ComponentBase {
        constructor() {
            super(...arguments);
            this.checked = false;
        }
        change(checked = this.checked) {
            var _a, _b;
            this.checked = checked;
            this.setChildrenHidden(checked);
            console.log('radio checked!!!!!!!', checked, this.checked, (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checked);
            if (this.getAttribute('on_change_checked')) {
                (_b = this.getAttribute('on_change_checked')) === null || _b === void 0 ? void 0 : _b(checked, this.inputElement);
            }
        }
        setChildrenHidden(checked) {
            this.getChildren(Checked).forEach(it => {
                it.hidden = !checked;
            });
            this.getChildren(UnChecked).forEach(it => {
                it.hidden = checked;
            });
        }
        onCreatedThisChild(child, childData) {
            super.onCreatedThisChild(child, childData);
            this.setChildrenHidden(this.checked);
        }
        onInitInputElement(element) {
            this.inputElement = element;
        }
        onChangeAttrRender(name, val, other) {
            super.onChangeAttrRender(name, val, other);
            if (this.inputElement && this.getAttribute('checked') !== this.checked) {
                this.inputElement.checked = !!this.getAttribute('checked');
                console.log('----changeAttribute', this.getAttribute('checked'));
                this.change(!!this.getAttribute('checked'));
            }
        }
    }
    Radio_1.Radio = Radio;
})(Radio || (Radio = {}));
export default {
    radioChecked: (config) => {
        return RawSet.createComponentTargetElement({
            name: `${Radio.selector}-checked`,
            template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
            objFactory: (e, o, r2, counstructorParam) => {
                return DomRender.run({ rootObject: new Radio.Checked(), config: config });
            }
        });
    },
    radioUnChecked: (config) => {
        return RawSet.createComponentTargetElement({
            name: `${Radio.selector}-unchecked`,
            template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
            objFactory: (e, o, r2, counstructorParam) => {
                return DomRender.run({ rootObject: new Radio.UnChecked(), config: config });
            }
        });
    },
    radio: (config) => {
        return RawSet.createComponentTargetElement({
            name: `${Radio.selector}`,
            template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
                '  <input\n' +
                '    name="${@this@.getAttribute(\'name\')}$"\n' +
                '    checked="${@this@.getAttribute(\'checked\')}$"\n' +
                '    value="${@this@.getAttribute(\'value\')}$"\n' +
                '    dr-on-init="@this@.onInitInputElement($element)"\n' +
                '    dr-event-change="@this@.change($element.checked);"\n' +
                '    type="radio"\n' +
                '\n' +
                '  />\n' +
                '  ${@this@.getAttribute(\'checked\')}$\n' +
                '  #innerHTML#\n' +
                '</label>',
            objFactory: (e, o, r2, counstructorParam) => {
                return DomRender.run({ rootObject: new Radio.Radio(...counstructorParam), config: config });
            }
        });
    },
};
//# sourceMappingURL=Radio.js.map