Page:: multi_select()

Used where one needs to perform multiple selections of table-rows(tr).

xxxxxxxxxx
    public multi_select(btn:HTMLButtonElement) {

Description

Determine whether to display or hide the multi-selector option.

xxxxxxxxxx
        const display= btn.classList.contains("multiselect");

Retrieve the styling CSS, then either hide or show the multiselect option and finally toggle the multi-selector class.

xxxxxxxxxx
const style_sheet=<CSSStyleSheet>(<HTMLStyleElement>this.get_element('theme_css')).sheet;
        //
        this.update_stylesheet(style_sheet,"multi_select",display);
        //
        btn.classList.toggle("multiselect");
    }

Update the stylesheet so that a given selection is either hidden or displayed. if hidden the display property of the matching CSS rule is set to none otherwise it's removed.

xxxxxxxxxx
    update_stylesheet (sheet: CSSStyleSheet, selection: String, hide: Boolean){

Use the selection to find the relevant rule. Convert the rule list in the CSS Sheet to an array.

xxxxxxxxxx
        const rules = <Array<CSSStyleRule>>Array.from(sheet.cssRules);

Find the index of the rule matching the selection, use the index to get the rule, then add or remove the display property.

xxxxxxxxxx
        const index = 
            rules.findIndex((rule1)=>rule1.selectorText ===  `.${selection}`);
        if(index === -1) throw new Error(`Rule .${selection} not found`);
        //
        const rule: CSSStyleRule = rules[index];
        //
        if (hide) rule.style.setProperty("display", "none");
        else rule.style.removeProperty("display");
    }