ds-material/ds material.js

Material Design 3 Plugin For DroidScript On Node

/* Material Design 3 Plugin.
   
   ------------------------
   Version :: 1.0
   Release Date :: 12/05/24
*/

/* Global Variables & Functions Here */

module.exports = {};


var _mDebug,_m3Path,privateFolder;

_mDebug = app.GetAppPath().endsWith('/Material-Design');

privateFolder = 
app.GetPrivateFolder('Plugins') + '/material-design/';

_m3Path = _mDebug ? '' : privateFolder;

var theme;
let defaultFont = _m3Path + 'resources/textFonts/Roboto.ttf';
let mediumFont = _m3Path + 'resources/textFonts/Roboto-Medium.ttf';
let boldFont = _m3Path + 'resources/textFonts/Roboto-Bold.ttf';


/** Initialize Material3, basically reads your baseTheme.json File
 * @param {string} baseTheme - Default theme. (light/dark etc)
 * @param {string} iconFill - Default icon fill. (sharp/two-tone etc)
*/
module.exports.InitializeMaterialPlugin = function(baseTheme, iconFill) {
    if (!app.FileExists('baseTheme.json')) {
        warnDeveloper(ErrorCodes["404"]);
        return;
    } 
    else {
        switch (iconFill) {
            case "outlined":
                defaultIcons = _m3Path + "resources/iconFonts/Outlined-Regular.otf";
            break;
            case "sharp":
                defaultIcons = _m3Path + "resources/iconFonts/Sharp-Regular.otf";
            break;
            case "two-tone":
                defaultIcons = _m3Path + "resources/iconFonts/TwoTone-Regular.otf";
            break;
            case "round":
                defaultIcons = _m3Path + "resources/iconFonts/Round-Regular.otf";
            break;
            default:
            defaultIcons = _m3Path + "resources/iconFonts/Outlined-Regular.otf";
        }
        if (baseTheme === undefined){
            theme = 'dark';
        }
        else theme = baseTheme;
        setM3BaseColors();
    }
    isInitialized.value = true;
}

/** Initialize Material3, basically reads your baseTheme.json File
 * @param {string} baseTheme - Default theme. (light/dark etc)
 * @param {string} iconFill - Default icon fill. (sharp/two-tone etc)
*/

app.CreateMaterial3 = (baseTheme, iconFill) => {
    module.exports.InitializeMaterialPlugin(baseTheme, iconFill);
    warnDeveloper(ErrorCodes["301"]+`
    \nUse module.exports.InitializeMaterialPlugin()`);
}

module.exports.installExtension = (url) =>{
    
}

/**
 * @summary Add an extension to your app.
 * @param {string} extensionName 
*/

module.exports.loadExtension = (extensionName) =>{
    
}

importExtension = function(name){
    
    const file = name + '.js';
    
    app.Script(file,true)
}

defineExtension = function(properttiesInJSON){
    
}
/**
 * @returns Plugin Version Number
*/
module.exports.getVersion = function(){
    return '0.99.9';
}

/**
 * @param {string} mode - 'light' or 'dark'
*/
module.exports.setTheme = function (mode) {
    if (mode == undefined){
        if (theme == 'light'){
            theme = 'dark';
        }
        else theme = 'light';
        setM3BaseColors();
    }
    else theme = mode;
    setM3BaseColors();
}

/**
 * @param {string} type - A DroidScript Layout Type
 * @param {string} options - Options For Layout, i.e: FillXY
 * @param {number} width - layout Width in DroidScript Scale 0 - 1
 * @param {number} height - layout height in DroidScript Scale 0 - 1
*/

module.exports.createLayout = function(type, options, width, height, parentLay) {
    const statusBarColor = jsonData.schemes.dark.background;
    let lay;
    if(isInitialized.value === false) {
        warnDeveloper(ErrorCodes["428"]);
        
        // We Have To return a valid Object
        return ErrorLayout();
    }
    else {
        if (!parentLay) {
            lay = app.CreateLayout(type, options);
            lay.SetBackColor(backgroundClr.value)
            app.SetStatusBarColor(statusBarColor);
            
            layoutType = type;
            layoutOptions = options;
        } 
        else {
            lay = app.AddLayout(parentLay, type, options);
            lay.SetSize(width, height);
        }
        backgroundClr.subscribe((value)=>{
            lay.SetBackColor(value);
        });
    return lay;
    }
}

/**
 * @param {string} btnName - Name Of Your Button
 * @param {number} width - Width in DroidScript Scale 0 - 1
 * @param {number} height - Height in DroidScript Scale 0 - 1
 * @param {string} icon - Favicon for button (dont add fa)
 * @param {object} parentLay - parent For Button
*/

module.exports.addFilledButton = function (btnName, width, height, icon, parentLay) {
    return new filledButtonObject(btnName, width, height, icon, parentLay);
}

/**
 * @param {string} btnName - Name Of Your Button
 * @param {number} width - Width in DroidScript Scale 0 - 1
 * @param {number} height - Height in DroidScript Scale 0 - 1
 * @param {string} icon - Favicon for button (dont add fa)
 * @param {object} parentLay - parent For Button
*/
module.exports.addElevatedButton =  function (btnName, width, height, icon, parentLay) {
    return new elevatedButtonObject(btnName, width, height, icon, parentLay);
}

/**
 * @param {string} btnName - Name Of Your Button
 * @param {number} width - Width in DroidScript Scale 0 - 1
 * @param {number} height - Height in DroidScript Scale 0 - 1
 * @param {string} icon - Favicon for button (dont add fa)
 * @param {object} parentLay - parent For Button
*/
module.exports.addFilledTonalButton = function (btnName, width, height, icon, parentLay) {
    return new filledTonalButtonObject(btnName, width, height, icon, parentLay);
}

/**
 * @param {string} btnName - Name Of Your Button
 * @param {number} width - Width in DroidScript Scale 0 - 1
 * @param {number} height - Height in DroidScript Scale 0 - 1
 * @param {string} icon - Favicon for button (dont add fa)
 * @param {object} parentLay - parent For Button
*/
module.exports.addOutlinedButton = function (btnName, width, height, icon, parentLay) {
    return new outlinedButtonObject(btnName, width, height, icon, parentLay);
}

/**
 * @param {string} btnName - Name Of Your Button
 * @param {number} width - Width in DroidScript Scale 0 - 1
 * @param {number} height - Height in DroidScript Scale 0 - 1
 * @param {string} icon - Favicon for button (dont add fa)
 * @param {object} parentLay - parent For Button
*/   
module.exports.addTextButton = function (btnName, width, height, icon, parentLay) {
    return new textButtonObject(btnName, width, height, icon, parentLay);
}

/**
 * @param {string} icon - Icon
 * @param {object} layout - parent For Component
*/ 
module.exports.addSmallFAB = function (icon, layout) {
    return new smallFABObject(icon, layout);
}

/**
 * @param {string} icon - Icon
 * @param {object} layout - parent For Component
*/ 
module.exports.addFAB = function (icon, layout) {
    return new fabObject(icon, layout);
}

/**
 * @param {string} icon - Icon
 * @param {object} layout - parent For Component
*/ 
module.exports.addLargeFAB = function (icon, layout) {
    return new largeFABObject(icon, layout);
}
    
module.exports.addChip = function (type, text, icon, width, height, parentLay) {
    return new chipObject(type, text, icon, width, height, parentLay);
}

/**
 * @param {string} text - Information displayed on SnackBar
 * @param {string} btnAction - Name of The Button
 * @param {number} width - Width in DroidScript Scale 0 -1
*/
module.exports.addSnackBar = function (text, btnAction, width, alignment) {
    return new SnackBarObject(text, btnAction, width, alignment);
}

/**
 * @param {string} progressType - Progress Bar Type (linear,linearIntermediate or Circular)
 * @param {number} width - Width In DroidScript Scale 0 -1
 * @param {object} layout - Parent For SnackBar
*/ 
module.exports.addProgressBar = function (progressType, width, layout) {
    return new progressObject(progressType, width, layout);
}

/**
    * @param {string} title - AppBar Title
    * @param {string} leadingIcon - Left Icon of AppBar
    * @param {string} controlsIcons - Upto 3 Icons in a String With Commas.
    * @param {object} parentLay - ParentLayout For AppBar
*/
module.exports.addAlignedAppBar = function (title, leadingIcon, controlIcons, parentLay) {
    return new centerAlignedAppBarObj(title, leadingIcon, controlIcons, parentLay);
}

/**
    * @param {string} title - AppBar Title
    * @param {string} leadingIcon - Left Icon of AppBar
    * @param {string} controlsIcons - Upto 3 Icons in a String With Commas.
    * @param {object} parentLay - ParentLayout For AppBar
*/
module.exports.addSmallAppBar = function(title, leadingIcon, controlIcons, parentLay){
    return new smallAppBarObject(title, leadingIcon, controlIcons, parentLay);
}

/**
    * @param {string} title - AppBar Title
    * @param {string} leadingIcon - Left Icon of AppBar
    * @param {string} controlsIcons - Upto 3 Icons in a String With Commas.
    * @param {object} parentLay - ParentLayout For AppBar
*/
module.exports.addMediumAppBar = function(title, leadingIcon, controlIcons, parentLay){
    return new mediumAppBarObject(title, leadingIcon, controlIcons, parentLay);
}


/**
 * @param {json} barPropsInjson - Properties in a JSON Format
 * @param {object} parentLayout - Parent For bottomBar
*/

module.exports.addBottomAppBar = function (barPropsInjson, parentLayout) {
    return new bottomBarObject(barPropsInjson, parentLayout);
}

/**
 * @param {string} leadingIcon - Icon (Material Icon)
 * @param {string} leadingIcon - Icon (Material Icon)
 * @param {string} hint - Search Hint on TextArea
 * @param {number} width - Width In DroidScript Scale 0 -1
 * @param {object} layout - Parent For SearchBar
*/
module.exports.addSearchBar = function(leadingIcon, trailingIcon, hint, width, parentLayout){
    return new searchBarObject(leadingIcon, trailingIcon, hint, width, parentLayout);
}

/**
 * @param {string} listOfTabs - listOfTabs With Commas As One String
 * @param {number} width - Width In DroidScript Scale 0 -1
 * @param {number} height - Height In DroidScript Scale 0 -1
 * @param {string} options - Options
 * @param {object} parentLay - Parent for Tab Component
*/
module.exports.addTabs = function(listOfTabs,width, height, options, parentLay){
    return new secTabObject(listOfTabs,width, height, options, parentLay);
}

/**
 * @param {object} sheetLayout - Add a layout to the bottomsheet
 * @param {number} height - Height of BottomSheet In ds Unit Scale.
 * @param {string} options - BottomSheet Options (NoDim)
 * @returns A BottomSheet
*/
module.exports.addBottomSheet = function(sheetLayout, height, options){
    return new bottomSheetObject(sheetLayout, height, options);
}

/**
 * @param {string} switchType - Set The Type of switch
 * @param {boolean} value - Add Boolean 
 * @param {object} parentLayout - Add a parent
*/
module.exports.addSwitch = function (switchType, value, parentLayout) {
    return new switchObject(switchType, value, parentLayout);
}

/**
 * @param {string} listOfSettings - Add list of Settings, use [] to add descriptions.
 * @param {string} switchValues - Add list of true/false values 
 * @param {number} width - Component width in ds scale.
 * @param {number} height - Component height in ds scale.
 * @param {object} parentLay - Parent For Component
*/
module.exports.addSwitchSettings = function(listOfSettings, switchValues, width, height, parentLay){
    return new 
    switchSettingsObject(listOfSettings, switchValues, width, height, parentLay);
}

/**
 * @param {number} value - A value on a 0 - 100 scale.
 * @param {number} width - Component width in ds scale.
 * @param {object} parentLay - Parent For Component
*/
module.exports.addContinuousSlider = function(value, width, parentLay){
    return new continuosSliderObj(value, width, parentLay)
}

/**
 * @param {boolean} checked The state of Checked Button
 * @param {object} parentLay The parent for checkbox
*/
module.exports.addCheckBox = function(checked, parentLay){
    return new checkboxObject(checked, parentLay)
}

/**
 * @param {string} list - A String, list separated in commas.
 * @param {string} checkDefinitions - A String List Of True/False.
 * @param {number} width - Component width in ds scale.
 * @param {number} height - Component height in ds scale.
 * @param {object} parentLay - Parent For Component
*/
module.exports.addCheckBoxList = function(list, checkDefinitions, width, height, parentLay){
    return new checkBoxListObject(list, checkDefinitions, width, height, parentLay)
}

module.exports.addRadioButton = function(isChecked, parentLay){
    return new radioButtonObject(isChecked, parentLay)
}

function alternateView(viewMappings){
    let rawView = JSON.stringify(viewMappings);
    let view = JSON.parse(rawView);
    
    if (app.IsTablet()){
        return app.AddLayout(view.tabletView);
    }
    if (app.IsChrome()){
        return app.AddLayout(view.desktopView);
    }
    else return app.AddLayout(view.mobileView)
}


/* Using var To take advantage
   of hoisting.
*/
 
var isInitialized;

isInitialized = createSignal();

isInitialized.value = false;

var backgroundClr;
backgroundClr = createSignal();

var filledBtnClr;

filledBtnClr = createSignal();

var filledBtnTxtClr;

filledBtnTxtClr = createSignal();

var elevatedBtnClr;

elevatedBtnClr = createSignal();

var elevatedBtnTxtClr;

elevatedBtnTxtClr = createSignal();

var filledTonalBtnClr;

filledTonalBtnClr = createSignal();

var filledTonalBtnTxtClr;

filledTonalBtnTxtClr = createSignal();

var textBtnTxtClr;

textBtnTxtClr = createSignal();

var outlinedBtnClr;

outlinedBtnClr = createSignal();

var outlinedBtnTxtClr;

outlinedBtnTxtClr = createSignal();

var _smallFabClr;

_smallFabClr = createSignal();

var _smallFabTxtClr;

_smallFabTxtClr = createSignal();

var _fabColor;

_fabColor = createSignal();

var _fabIconClr;

_fabIconClr = createSignal();

var progressBackClr;

progressBackClr = createSignal();

var progressIndicatorClr;

progressIndicatorClr = createSignal();

var appBarColor = createSignal();
var appBarIconColor = createSignal();
var appBarTextsClr = createSignal();
var bottomBarAppClr = createSignal();
var bottomBarAppTxtClr = createSignal()
var bottomAppBarFAB = createSignal();

var searchBarClr = createSignal();
var searchBarIconClr = createSignal();
var searchBarTextClr = createSignal();
var searchBarInputTextClr = createSignal();

var secondaryTabClr = createSignal();
var lightBarClr = createSignal();
var secondaryTabTxtClr = createSignal();

var smallAppBarClr = createSignal();

var smallAppBarIconClr = createSignal();

var switchColor = createSignal();

var switchHandleOffColor;
switchHandleOffColor = createSignal();

var switchHandleOnColor;
switchHandleOnColor = createSignal();

var switchSettingTextClr = createSignal();


var mediumBarClr = createSignal();
var ErrorCodes;

ErrorCodes = {
    "301":"component Has Been Moved or Name Changed",
    "400":"parentLayout Is Not Defined For ::",
    "404":"baseTheme File Not Found",
    "415":"un-supported Media Type For ::",
    "428":"plugin Is Not Initialized"
}

var nil = '';
var unpositionalLayout = ["Linear", "Frame", "Card"];

var ErrorLayout;

ErrorLayout = () =>{
    let layout = app.CreateLayout('Linear','FillXY,H/VCenter');
    
    let errorMsg = app.AddText(layout,'Hi 🙋 you didnt Initailize Material3.')
    
    layoutType = 'Linear';
    layoutOptions = 'FillXY,H/VCenter';
    return layout;
}


const warnDeveloper = (Msg) =>{
    let alertClr = "<div style='color:#FF7900'>";
    console.log(alertClr + Msg);
}


const dpToPxConversion = (dpValue) => {
    return dpValue * (app.GetScreenDensity() / 160);
}

const pxToDpConversion = (pxValue) => {
    return pxValue / (app.GetScreenDensity() / 160);
}

const dsUnitsToDp = function(dsUnit, side){
    if (side == 'width' || side == 'w'){
        let dWidth = pxToDpConversion(DW());
        return dsUnit * dWidth;
    }
    else {
        let dHeight =  pxToDpConversion(DH());
        return dsUnit * dHeight;
    }
}

const dpToDsUnit = function(dpValue, side){
    if (side == 'width' || side == 'w'){
        let dWidth = pxToDpConversion(DW());
        return dpValue/dWidth;
    }
    else {
        let dHeight =  pxToDpConversion(DH());
        return dpValue/dHeight;
    }
}

function stateColor (lightValue, darkValue) {
    /* Default theme is always dark
       and can be changed w,
       setTheme method.
    */
    if(theme == undefined) theme = 'dark';
    if (theme === 'light') return lightValue;
    else return darkValue; 
}

  
function createSignal(defaultValue) {
    let __InnerValue = defaultValue;
    let subscribers = [];
    
    function notify() {
        for (let subscriber of subscribers) {
            subscriber(__InnerValue);
            }
    }
        
    return {
        get value() {
            return __InnerValue;
        },
        set value(newVariable) {
            __InnerValue = newVariable;
            notify();
        },
        
        subscribe: (subscriber) => {
            subscribers.push(subscriber);
        }
    }
}

function setM3BaseColors() {
    appTheme = app.ReadFile("baseTheme.json", "UTF-8");

    jsonData = JSON.parse(appTheme);

    function getColorHexCode(colorName) {
        const colorScheme = jsonData.schemes[theme];
        return colorScheme[colorName];
    }

    primary = getColorHexCode("primary");
    surfaceTint = getColorHexCode("surfaceTint");
    onPrimary = getColorHexCode("onPrimary");
    primaryContainer = getColorHexCode("primaryContainer");
    onPrimaryContainer = getColorHexCode("onPrimaryContainer");
    secondary = getColorHexCode("secondary");
    onSecondary = getColorHexCode("onSecondary");
    secondaryContainer = getColorHexCode("secondaryContainer");
    onSecondaryContainer = getColorHexCode("onSecondaryContainer");
    tertiary = getColorHexCode("tertiary");
    onTertiary = getColorHexCode("onTertiary");
    tertiaryContainer = getColorHexCode("tertiaryContainer");
    onTertiaryContainer = getColorHexCode("onTertiaryContainer");
    error = getColorHexCode("error");
    onError = getColorHexCode("onError");
    errorContainer = getColorHexCode("errorContainer");
    onErrorContainer = getColorHexCode("onErrorContainer");
    background = getColorHexCode("background");
    onBackground = getColorHexCode("onBackground");
    surface = getColorHexCode("surface");
    onSurface = getColorHexCode("onSurface");
    surfaceVariant = getColorHexCode("surfaceVariant");
    onSurfaceVariant = getColorHexCode("onSurfaceVariant");
    outline = getColorHexCode("outline");
    outlineVariant = getColorHexCode("outlineVariant");
    shadow = getColorHexCode("shadow");
    scrim = getColorHexCode("scrim");
    inverseSurface = getColorHexCode("inverseSurface");
    inverseOnSurface = getColorHexCode("inverseOnSurface");
    inversePrimary = getColorHexCode("inversePrimary");
    primaryFixed = getColorHexCode("primaryFixed");
    onPrimaryFixed = getColorHexCode("onPrimaryFixed");
    primaryFixedDim = getColorHexCode("primaryFixedDim");
    onPrimaryFixedVariant = getColorHexCode("onPrimaryFixedVariant");
    secondaryFixed = getColorHexCode("secondaryFixed");
    onSecondaryFixed = getColorHexCode("onSecondaryFixed");
    secondaryFixedDim = getColorHexCode("secondaryFixedDim");
    onSecondaryFixedVariant = getColorHexCode("onSecondaryFixedVariant");
    tertiaryFixed = getColorHexCode("tertiaryFixed");
    onTertiaryFixed = getColorHexCode("onTertiaryFixed");
    tertiaryFixedDim = getColorHexCode("tertiaryFixedDim");
    onTertiaryFixedVariant = getColorHexCode("onTertiaryFixedVariant");
    surfaceDim = getColorHexCode("surfaceDim");
    surfaceBright = getColorHexCode("surfaceBright");
    surfaceContainerLowest = getColorHexCode("surfaceContainerLowest");
    surfaceContainerLow = getColorHexCode("surfaceContainerLow");
    surfaceContainer = getColorHexCode("surfaceContainer");
    surfaceContainerHigh = getColorHexCode("surfaceContainerHigh");
    surfaceContainerHighest = getColorHexCode("surfaceContainerHighest");

    backgroundClr.value = background;

    filledBtnClr.value = primary;

    filledBtnTxtClr.value = onPrimary;

    elevatedBtnClr.value = secondaryContainer;

    elevatedBtnTxtClr.value = primary;

    filledTonalBtnClr.value = primaryContainer;

    filledTonalBtnTxtClr.value = onSecondaryContainer;

    textBtnTxtClr.value = primary;

    outlinedBtnClr.value = surface;

    outlinedBtnTxtClr.value = primary;

    _smallFabClr.value = primaryContainer;

    _smallFabTxtClr.value = onPrimaryContainer;

    _fabColor.value = primaryContainer;

    _fabIconClr.value = onPrimaryContainer;

    progressBackClr.value = surfaceVariant;

    progressIndicatorClr.value = primary;

    appBarColor.value = surface;

    appBarIconColor.value = background;

    appBarTextsClr.value = onSurface;

    bottomBarAppClr.value = surfaceVariant;

    bottomBarAppTxtClr.value = onPrimaryContainer;

    bottomAppBarFAB.value = primaryContainer;

    searchBarClr.value = surfaceVariant;

    searchBarIconClr.value = surfaceVariant;

    searchBarTextClr.value = onSurface;

    searchBarInputTextClr.value = onSurfaceVariant;

    secondaryTabClr.value = surface;

    lightBarClr.value = primary;

    secondaryTabTxtClr.value = onSurface;

    smallAppBarClr.value = surface;

    smallAppBarIconClr.value = onSurface;

    switchColor.value = secondaryContainer;

    switchHandleOffColor.value = outline;

    switchHandleOnColor.value = primary;

    switchSettingTextClr.value = onSurface;

    mediumBarClr.value = surface;
}

function radioButtonObject(isChecked, parentLay){
    let radio;
    
    this.SetOnCheck = function (onCheck){
        this.onCheck = onCheck;
    }
    
    /**
     * @param {boolean} boolValue True or False, For Enabled/Disabled CheckBox
    */
    
    this.SetEnabled = function(boolValue){
        if (boolValue) {
            radio.SetText('radio_button_checked')
            radio.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf")
            radio.SetTextColor(outline)
            radio.SetEnabled(false)
        }
        else {
            radio.SetEnabled(true);
            if (isChecked){
                radio.SetText('radio_button_checked')
                radio.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf")
                radio.SetTextColor(primary)
            }
            else {
                radio.SetText('radio_button_unchecked')
                radio.SetTextColor(onSurface);
                radio.SetFontFile(defaultIcons);
            }
        }
    }
    
    if (!parentLay){
        warnDeveloper('No Parent For Your RadioButton');
        return;
    }
    else radio = drawRadioButton(isChecked, parentLay, this)
}

function drawRadioButton(isChecked, parentLay, radioObj){
    let radio;
    let radius = 50/100 * (40)
    
     /* A subscriber for the checking utility */
    let checkSubscriber = createSignal();
    checkSubscriber.value = isChecked;
    
    
    radio = app.AddButton(parentLay,null,null,null,'Custom');
    
    radio.SetSize(40,40,'dp');
    radio.SetTextSize(24,'dp');
    radio.SetStyle('#00000000','#00000000',radius,null,null,0);
    
    radio.SetOnTouch(()=>{
       if (checkSubscriber.value){
           checkSubscriber.value = false;
           radio.SetTextColor(onSurface);
           radio.SetFontFile(defaultIcons);
           radio.SetText('radio_button_unchecked')
        }
        else {
            checkSubscriber.value = true;
            radio.SetText('radio_button_checked')
            radio.SetTextColor(primary);
            radio.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf");
        }
        
        if (radioObj.onCheck){
            M(this,radioObj.onCheck(checkSubscriber.value));
        }
        else return null;
    });
    
    if (isChecked){
        radio.SetText('radio_button_checked')
        radio.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf")
        radio.SetTextColor(primary)
    }
    else {
        radio.SetText('radio_button_unchecked')
        radio.SetTextColor(onSurface);
        radio.SetFontFile(defaultIcons);
    }
    
    return radio;
}

function checkboxObject(checked, parentLay){
    let checkbox;
    
    /** TODO
     * Add SetPosition
     * Add SetMargins
     * Add ClearFocus
     * Add Gone
     * Add Hide
     * Add Visibility
     * Animate
     * Tween
    */
    
    /**
     * @param {Function} onCheck This is your function called after a check.
    */
    this.SetOnCheck = function (onCheck){
        this.onCheck = onCheck;
    }
    
    /**
     * @param {boolean} boolValue True or False, For Enabled/Disabled CheckBox
    */
    
    this.SetEnabled = function(boolValue){
        if (boolValue) {
            checkbox.SetText('indeterminate_check_box')
            checkbox.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf")
            checkbox.SetTextColor(primary)
            checkbox.SetEnabled(false)
        }
        else {
            checkbox.SetEnabled(true);
            if (checked){
                checkbox.SetText('check_box')
                checkbox.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf")
                checkbox.SetTextColor(primary)
            }
            else {
                checkbox.SetText('check_box_outline_blank')
                checkbox.SetTextColor(onSurface);
                checkbox.SetFontFile(defaultIcons);
            }
        }
    }
    
    if (!parentLay){
        warnDeveloper('Add a parent for CheckBox');
        return;
    }
    else checkbox = drawCheckBox(checked, parentLay, this);
}

function drawCheckBox(checked, parentLay, checkObj){
    let checkbox;
    let radius = 50/100 * (40)
    
    /* A subscriber for the checking utility */
    let checkSubscriber = createSignal();
    checkSubscriber.value = checked;
    
    checkbox = app.AddButton(parentLay,null,null,null,'Custom');
    
    checkbox.SetSize(40,40,'dp');
    checkbox.SetTextSize(24,'dp');
    checkbox.SetStyle('#00000000','#00000000',radius,null,null,0);
    
    checkbox.SetOnTouch(()=>{
       if (checkSubscriber.value){
           checkSubscriber.value = false;
           checkbox.SetTextColor(onSurface);
           checkbox.SetFontFile(defaultIcons);
           checkbox.SetText('check_box_outline_blank')
        }
        else {
            checkSubscriber.value = true;
            checkbox.SetText('check_box')
            checkbox.SetTextColor(primary);
            checkbox.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf");
        }
        
        if (checkObj.onCheck){
            M(this,checkObj.onCheck(checkSubscriber.value));
        }
        else return null;
    });
    
    if (checked){
        checkbox.SetText('check_box')
        checkbox.SetFontFile(_m3Path + "resources/iconFonts/Sharp-Regular.otf")
        checkbox.SetTextColor(primary)
    }
    else {
        checkbox.SetText('check_box_outline_blank')
        checkbox.SetTextColor(onSurface);
        checkbox.SetFontFile(defaultIcons);
    }
    return checkbox;
}

function filledButtonObject(btnName, width, height, icon, parentLay) {
    let filledButton;

    this.Animate = function (type, callback, time) {
        filledButton.Animate(type, callback, time);
    }
    this.SetScale = function (x, y) {
        filledButton.SetScale(x, y);
    }
    this.SetVisibility = function (mode) {
        filledButton.SetVisibility(mode);
    }
    this.SetEnabled = function (enableBool) {
        filledButton.SetEnabled(enableBool);
    }
    this.SetEllipsize = function (mode) {
        filledButton.SetEllipsize(mode);
    }
    this.SetDescription = function (desc) {
        filledButton.SetDescription(desc);
    }
    this.SetHtml = function (str) {
        filledButton.SetHtml(str);
    }
    this.SetText = function (text) {
        filledButton.SetText(text);
    }
    this.SetTextSize = function (size, mode) {
        filledButton.SetTextSize(size, mode);
    }
    this.SetPosition = function(left,top,width,height,options) {
        filledButton.SetPosition(left,top,width,height,options)
    }
    this.SetMargins = function (left, top, right, bottom, mode) {
        filledButton.SetMargins(left, top, right, bottom, mode);
    }
    this.SetPadding = function (left, top, right, bottom, mode) {
        filledButton.SetPadding(left, top, right, bottom, mode);
    }
    this.SetOnTouch = function (onTouch) {
        filledButton.SetOnTouch(I(onTouch.bind(filledButton)));
    }
    this.SetOnLongTouch = function (onLongTouch) {
        filledButton.SetOnLongTouch(I(onLongTouch.bind(filledButton)));
    }
    this.Tween = function (target, duration, type, repeat, yoyo, callback) {
        filledButton.Tween(target, duration, type, repeat, yoyo, callback);
    }
    this.Focus = function () {
        filledButton.Focus();
    }
    this.Gone = function () {
        filledButton.Gone();
    }
    this.Show = function () {
        filledButton.Show();
    }
    this.Hide = function () {
        filledButton.Hide();
    }


    filledButton = drawFilledButton(btnName, width, height, icon, parentLay)
}

function drawFilledButton(btnName, width, height, icon, parentLay) {
    let filledButton;

    filledButton = app.AddButton(parentLay, null, width, height, 'Custom,FontAwesome');
    filledButton.SetStyle(filledBtnClr.value, filledBtnClr.value, 20, null, null, 0)
    filledButton.SetTextColor(filledBtnTxtClr.value)
    
    if (icon === null) {
        filledButton.SetText(btnName);
    } else {
        filledButton.SetText(`[fa-${icon}]` + ' ' + btnName);
    }
    
    filledButton.SetFontFile(defaultFont);
    
    
    /**To use Drag Api, The Parent of that component must be
     **an Absolute layout, it should have TouchSpy and TouchThrough
     **as options.
     enableDrag - Allow Button To Be Dragged
    */
    filledButtonObject.prototype.EnableDrag = function() {
    
    parentLay.SetOnTouchMove(function(event) {
        let xVal = JSON.stringify(event.x[0]);
        let yVal = JSON.stringify(event.y[0]);
        console.log("<div style='color:#FF7900'>" + 'X :: '+JSON.stringify(event.x[0]))
        console.log("<div style='color:red'>" + 'Y :: '+JSON.stringify(event.y[0]))
        filledButton.SetPosition(xVal,yVal)        
    });
    
    }
    

    filledBtnClr.subscribe((value)=>{
        filledButton.SetStyle(value, value, 20, null, null, 0)
    })
    
    filledBtnTxtClr.subscribe((value)=>{
        filledButton.SetTextColor(value)
    })
    
    return filledButton;
}



function elevatedButtonObject(btnName, width, height, icon, parentLay) {
    let elevatedButton;
    // Button Methods :::
    
    this.Animate = function (type, callback, time) {
        elevatedButton.Animate(type, callback, time);
    }
    this.SetScale = function (x, y) {
        elevatedButton.SetScale(x, y);
    }
    this.SetVisibility = function (mode) {
        elevatedButton.SetVisibility(mode);
    }
    this.SetEnabled = function (enableBool) {
        elevatedButton.SetEnabled(enableBool);
    }
    this.SetEllipsize = function (mode) {
        elevatedButton.SetEllipsize(mode);
    }
    this.SetDescription = function (desc) {
        elevatedButton.SetDescription(desc);
    }
    this.SetHtml = function (str) {
        elevatedButton.SetHtml(str);
    }
    this.SetText = function (text) {
        elevatedButton.SetText(text);
    }
    this.SetTextSize = function (size, mode) {
        elevatedButton.SetTextSize(size, mode);
    }
    this.SetMargins = function (left, top, right, bottom, mode) {
        elevatedButton.SetMargins(left, top, right, bottom, mode);
    }
    this.SetPadding = function (left, top, right, bottom, mode) {
        elevatedButton.SetPadding(left, top, right, bottom, mode);
    }
    this.SetOnTouch = function (onTouch) {
        elevatedButton.SetOnTouch(I(onTouch.bind(elevatedButton)));
    }
    this.SetOnLongTouch = function (onLongTouch) {
        elevatedButton.SetOnLongTouch(I(onLongTouch.bind(elevatedButton)));
    }
    this.Tween = function (target, duration, type, repeat, yoyo, callback) {
        elevatedButton.Tween(target, duration, type, repeat, yoyo, callback);
    }
    this.Focus = function () {
        elevatedButton.Focus();
    }
    this.Gone = function () {
        elevatedButton.Gone();
    }
    this.Show = function () {
        elevatedButton.Show();
    }
    this.Hide = function () {
        elevatedButton.Hide();
    }

    
    //Call It 
    elevatedButton = drawElevatedBtn(btnName, width, height, icon, parentLay, this)
}


function drawElevatedBtn(btnName, width, height, icon, parentLay, elevatedObj) {
    let elevatedButton;
    elevatedButton = app.AddButton(parentLay, null, width, height, 'Custom,FontAwesome');
    elevatedButton.SetTextColor(elevatedBtnTxtClr.value);
    elevatedButton.SetFontFile(defaultFont);
    
    if (icon === null) {
        elevatedButton.SetText(btnName);
    } else elevatedButton.SetText(`[fa-${icon}]` + ' ' + btnName);
    
    elevatedButton.SetStyle(elevatedBtnClr.value, elevatedBtnClr.value, 20, null, null, 0);
    
    elevatedBtnClr.subscribe((value)=>{
        elevatedButton.SetStyle(value,value, 20, null, null, 0);
    });
    
    elevatedBtnTxtClr.subscribe((value)=>{
        elevatedButton.SetTextColor(value);
    })
    return elevatedButton;
}


function filledTonalButtonObject(btnName, width, height, icon, parentLay) {
    let filledTonalButton;
    // Button Methods :::
    
    this.Animate = function (type, callback, time) {
        filledTonalButton.Animate(type, callback, time);
    }
    this.SetScale = function (x, y) {
        filledTonalButton.SetScale(x, y);
    }
    this.SetVisibility = function (mode) {
        filledTonalButton.SetVisibility(mode);
    }
    this.SetEnabled = function (enableBool) {
        filledTonalButton.SetEnabled(enableBool);
    }
    this.SetEllipsize = function (mode) {
        filledTonalButton.SetEllipsize(mode);
    }
    this.SetDescription = function (desc) {
        filledTonalButton.SetDescription(desc);
    }
    this.SetHtml = function (str) {
        filledTonalButton.SetHtml(str);
    }
    this.SetText = function (text) {
        filledTonalButton.SetText(text);
    }
    this.SetTextSize = function (size, mode) {
        filledTonalButton.SetTextSize(size, mode);
    }
    this.SetMargins = function (left, top, right, bottom, mode) {
        filledTonalButton.SetMargins(left, top, right, bottom, mode);
    }
    this.SetPadding = function (left, top, right, bottom, mode) {
        filledTonalButton.SetPadding(left, top, right, bottom, mode);
    }
    this.SetOnTouch = function (onTouch) {
        filledTonalButton.SetOnTouch(I(onTouch.bind(filledTonalButton)));
    }
    this.SetOnLongTouch = function (onLongTouch) {
        filledTonalButton.SetOnLongTouch(I(onLongTouch.bind(filledTonalButton)));
    }
    this.Tween = function (target, duration, type, repeat, yoyo, callback) {
        filledTonalButton.Tween(target, duration, type, repeat, yoyo, callback);
    }
    this.Focus = function () {
        filledTonalButton.Focus();
    }
    this.Gone = function () {
        filledTonalButton.Gone();
    }
    this.Show = function () {
        filledTonalButton.Show();
    }
    this.Hide = function () {
        filledTonalButton.Hide();
    }

    
    //Call It
    
    filledTonalButton = drawFilledTonalBtn(btnName, width, height, icon, parentLay, this)
}

function drawFilledTonalBtn(btnName, width, height, icon, parentLay, filledTonalObj) {
    let filledTonalButton;
    filledTonalButton = app.AddButton(parentLay, null, width, height, 'Custom,FontAwesome');
    filledTonalButton.SetFontFile(defaultFont)
    filledTonalButton.SetTextColor(filledTonalBtnTxtClr.value);
    
    
    if (icon === null) {
        filledTonalButton.SetText(btnName);
    } else filledTonalButton.SetText(`[fa-${icon}]` + ' ' + btnName);
    
    filledTonalButton.SetStyle(filledTonalBtnClr.value, filledTonalBtnClr.value, 20, null, null, 0);
    
    filledTonalBtnClr.subscribe((value)=>{
        filledTonalButton.SetStyle(value,value, 20, null, null, 0);
    });
    
    filledTonalBtnTxtClr.subscribe((value)=>{
        filledTonalButton.SetTextColor(value);
    });
    return filledTonalButton;
}

function outlinedButtonObject(btnName, width, height, icon, parentLay) {
    // Button Methods :::
    let _outlinedButton;
    this.Animate = function (type, callback, time) {
        _outlinedButton.Animate(type, callback, time);
    }
    this.SetScale = function (x, y) {
        _outlinedButton.SetScale(x, y);
    }
    this.SetVisibility = function (mode) {
        _outlinedButton.SetVisibility(mode);
    }
    this.SetEnabled = function (enableBool) {
        _outlinedButton.SetEnabled(enableBool);
    }
    this.SetEllipsize = function (mode) {
        _outlinedButton.SetEllipsize(mode);
    }
    this.SetDescription = function (desc) {
        _outlinedButton.SetDescription(desc);
    }
    this.SetHtml = function (str) {
        _outlinedButton.SetHtml(str);
    }
    this.SetText = function (text) {
        _outlinedButton.SetText(text);
    }
    this.SetTextSize = function (size, mode) {
        _outlinedButton.SetTextSize(size, mode);
    }
    this.SetMargins = function (left, top, right, bottom, mode) {
        _outlinedButton.SetMargins(left, top, right, bottom, mode);
    }
    this.SetPadding = function (left, top, right, bottom, mode) {
        _outlinedButton.SetPadding(left, top, right, bottom, mode);
    }
    this.SetOnTouch = function (onTouch) {
        _outlinedButton.SetOnTouch(I(onTouch.bind(_outlinedButton)));
    }
    this.SetOnLongTouch = function (onLongTouch) {
        _outlinedButton.SetOnLongTouch(I(onLongTouch.bind(_outlinedButton)));
    }
    this.Tween = function (target, duration, type, repeat, yoyo, callback) {
        _outlinedButton.Tween(target, duration, type, repeat, yoyo, callback);
    }
    this.Focus = function () {
        _outlinedButton.Focus();
    }
    this.Gone = function () {
        _outlinedButton.Gone();
    }
    this.Show = function () {
        _outlinedButton.Show();
    }
    this.Hide = function () {
        _outlinedButton.Hide();
    }

    
    //Call It 
    _outlinedButton = drawOutlinedBtn(btnName, width, height, icon, parentLay, this);
}

function drawOutlinedBtn(btnName, width, height, icon, parentLay, outlineObj) {
    
    
    let _outlinedButton = app.AddButton(parentLay, null, width, height, 'Custom,FontAwesome');
    _outlinedButton.SetFontFile(defaultFont)
    _outlinedButton.SetTextColor(outlinedBtnTxtClr.value);
    
    if (icon === null) {
        _outlinedButton.SetText(btnName);
    } else _outlinedButton.SetText(`[fa-${icon}]` + ' ' + btnName);
    
    _outlinedButton.SetStyle(outlinedBtnClr.value, outlinedBtnClr.value, 20, outline, 1, 0);
    
    outlinedBtnClr.subscribe((value)=>{
        _outlinedButton.SetStyle(value, value, 20, outline, 1, 0);
    })
    
    outlinedBtnTxtClr.subscribe((value)=>{
        _outlinedButton.SetTextColor(value);
    })
    return _outlinedButton;
}

function textButtonObject(btnName, width, height, icon, parentLay) {
    
    let _textButton;
    // Button Methods :::
    this.SetMargins = function (left, top, right, bottom, mode) {
        _textButton.SetMargins(left, top, right, bottom, mode);
    }
        this.Animate = function (type, callback, time) {
        _textButton.Animate(type, callback, time);
    }
    
    
    this.SetScale = function (x, y) {
        _textButton.SetScale(x, y);
    }
    this.SetVisibility = function (mode) {
        _textButton.SetVisibility(mode);
    }
    this.SetEnabled = function (enableBool) {
        _textButton.SetEnabled(enableBool);
    }
    this.SetEllipsize = function (mode) {
        _textButton.SetEllipsize(mode);
    }
    this.SetDescription = function (desc) {
        _textButton.SetDescription(desc);
    }
    this.SetHtml = function (str) {
        _textButton.SetHtml(str);
    }
    this.SetText = function (text) {
        _textButton.SetText(text);
    }
    this.SetTextSize = function (size, mode) {
        _textButton.SetTextSize(size, mode);
    }
    
    this.SetPadding = function (left, top, right, bottom, mode) {
        _textButton.SetPadding(left, top, right, bottom, mode);
    }
    this.SetOnTouch = function (onTouch) {
        _textButton.SetOnTouch(I(onTouch.bind(_textButton)));
    }
    this.SetOnLongTouch = function (onLongTouch) {
        _textButton.SetOnLongTouch(I(onLongTouch.bind(_textButton)));
    }
    this.Tween = function (target, duration, type, repeat, yoyo, callback) {
        _textButton.Tween(target, duration, type, repeat, yoyo, callback);
    }
    this.Focus = function () {
        _textButton.Focus();
    }
    this.Gone = function () {
        _textButton.Gone();
    }
    this.Show = function () {
        _textButton.Show();
    }
    
    this.Hide = function (){
        _textButton.Hide();
    }
    
    // Call It
    _textButton = drawTextBtn(btnName, width, height, icon, parentLay, this);
    
}

function drawTextBtn(btnName, width, height, icon, parentLay, textBtnObj) {
    let _textButton = app.AddButton(parentLay, null, width, height, 'Custom,FontAwesome');
    _textButton.SetFontFile(defaultFont)
    _textButton.SetTextColor(textBtnTxtClr.value);
    
    if (icon === null) {
        _textButton.SetText(btnName);
    } else _textButton.SetText(`[fa-${icon}]` + ' ' + btnName);
    
    _textButton.SetStyle(backgroundClr.value, backgroundClr.value, 20, null, null, 0);
    
    backgroundClr.subscribe((value)=>{
        _textButton.SetStyle(value,value, 20, null, null, 0);
    })
    
    textBtnTxtClr.subscribe((value)=>{
        _textButton.SetTextColor(value);
    });
    
    return _textButton;
}

function fabObject(icon, parentLay) {
    let fabContainer;
    this.SetOnTouch = function (onTouch) {
        fabContainer.SetOnTouch( M( fabContainer, onTouch) )
    }
    /* If the unwanted layout is detected warn dev
       If FillXY isnt being used notify dev
    */
   
    if (unpositionalLayout.includes(layoutType) || !layoutOptions.includes('FillXY')){
        warnDeveloper('FAB Component Only Used With Absolute Layouts\n With FillXY');
    }
    else fabContainer = drawFAB(icon, parentLay, this);
}

function drawFAB(icon, parentLay, fabObj) {
    let _fab;
    
    _fab = app.AddButton(parentLay, icon, null, null, 'Customize,Lego');
    _fab.SetSize(56,56,'dp');
    
    _fab.SetTextSize(24,'dp');
    _fab.SetTextColor(_fabIconClr.value);
    _fab.SetFontFile(defaultIcons);
    _fab.SetStyle(_fabColor.value,_fabColor.value,16,null,null,0);
    
    
    leftPos = DW()- dpToPxConversion(72);
    topPos = DH()- dpToPxConversion(56+16);
    
    _fab.SetPosition(leftPos, topPos, null, null, 'px')
    
    _fabColor.subscribe((value)=>{
        _fab.SetStyle(value,value,16,null,null,0);
    })
    
    _fabIconClr.subscribe((value)=>{
        _fab.SetTextColor(value);
    })
    return _fab;
}


function smallFABObject(icon, parentLay) {
    let smallFabContainer;
    
    this.SetOnTouch = function (onTouch) {
        smallFabContainer.SetOnTouch( M( null, onTouch) )
    }
    
    this.SetRawAlignment = function(left, top){
        smallFabContainer.SetPosition(left, top);
    }
    
    if (unpositionalLayout.includes(layoutType) || !layoutOptions.includes('FillXY')){
        warnDeveloper('FAB Component Only Used With Absolute Layouts\n With FillXY');
    }
    else {
        smallFabContainer = drawSmallFab(icon, parentLay, this);
        
    } 
}

function drawSmallFab(icon, parentLay, j) {
    let _smallFab;
    
    _smallFab = app.AddButton(parentLay, icon, null, null, 'Customize,Lego');
    _smallFab.SetSize(40,40,'dp');
    
    _smallFab.SetTextSize(20,'dp');
    _smallFab.SetTextColor(_smallFabTxtClr.value);
    _smallFab.SetFontFile(defaultIcons);
    _smallFab.SetStyle(_smallFabClr.value,_smallFabClr.value,12,null,null,0);
    
    _smallFabClr.subscribe((value)=>{
        _smallFab.SetStyle(value,value,12,null,null,0);
    });
    
    _smallFabTxtClr.subscribe((value)=>{
        _smallFab.SetTextColor(value);
    })
    
    leftPos = DW()- dpToPxConversion(72);
    topPos = DH()- dpToPxConversion(56+16);
    
    //_smallFab.SetPosition(leftPos, topPos, null, null, 'px')
    
    
    return _smallFab;
}




function largeFABObject(icon, parentLay) {
    let largeFabContainer;
    
    this.SetMargins = function (left, top, right, bottom, mode) {
        largeFabContainer.SetMargins(left, top, right, bottom, mode);
    }
    
    this.SetPosition = function (left, top, width, height, options) {
        largeFabContainer.SetPosition(left, top, width, height, options);
    }
    if(!parentLay){
        warnDeveloper('No Parent For FAB')
    }
    else largeFabContainer = drawLargeFab(icon, parentLay, this);
}

function drawLargeFab(icon, parentLay, largefabOBj, largeFABObj) {
    let largeFabContainer;
    
    largeFabContainer = app.CreateLayout('Linear', 'TouchThrough,Spy');
    largeFabContainer.SetSize(96, 96, 'dp');
    
    
    const fab = app.CreateLayout('Card', 'Right,Bottom,FillXY');
    fab.SetSize(96, 96, 'dp');
    fab.SetElevation(0);
    fab.SetCornerRadius(28);
    
    const _fabIcon = app.CreateText(icon, null, null, 'H/VCenter,FillXY');
    _fabIcon.SetFontFile(defaultIcons);
    
    
    _fabIcon.SetTextSize(36);
    fab.AddChild(_fabIcon);
    largeFabContainer.AddChild(fab);
    
    
    fab.SetBackColor(_smallFabClr.value);
    _fabIcon.SetTextColor(_smallFabTxtClr.value)
    
    largeFABObject.prototype.SetOnTouch = function(onTouch){
        _fabIcon.SetOnTouchDown(M(this,function(){
            onTouch();
        }))
    }
    
    _smallFabClr.subscribe((value)=>{
        _fabIcon.SetTextColor(value)
    });
    
    _smallFabTxtClr.subscribe((value)=>{
        _fabIcon.SetTextColor(value)
    })
    
    parentLay.AddChild(largeFabContainer);
    return largeFabContainer;
    
}


function checkBoxListObject(list, checkDefinitions, width, height, parentLay){
    let checkbox;
    
    if(!parentLay){
        warnDeveloper('No Parent For CheckBox');
        return;
    }
    else checkbox = drawCheckBoxList(list, checkDefinitions, width, height, parentLay);
    
}

function drawCheckBoxList(list, checkDefinitions, width, height, parentLay){
    let noOfSettings = list.split(',').length;
    
    /* If checkDefinitions is null or undefined assume all is true */
    let noOfCheckDefinitions = checkDefinitions.split(',').length;
    let checkbox,singleCheckList;
    
    checkbox = module.exports.createLayout('Linear',null,width,height,parentLay);
    
    /* Just A Simple Template */
    singleCheckList = function(item, checkDefinition){
        let singleCheckLay = module.exports.createLayout('Linear',null,width,height,checkbox)
        let check = app.AddButton(singleCheckLay,null,null,null,'Custom');
        /* TODO */
    }
    return checkbox;
}

function bottomSheetObject(sheetLayout, height, options) {
    this.Show = function () {
        drawBottomSheet(sheetLayout, height, options);
    }
}

function drawBottomSheet(sheetLayout, height, options) {
    let bottomSheet,cardLayout;
    
    bottomSheet = app.CreateLayout('Linear', 'FillXY,VCenter,Bottom');
    bottomSheet.SetSize(1, 1);
    bottomSheet.SetOnTouchUp(function(){
        cardLayout.Animate('SlideToBottom', function(){
            cardLayout.RemoveChild(sheetLayout);
            app.RemoveLayout(bottomSheet)
        }, 210); 
    });
    bottomSheet.SetBackColor(scrim);
    bottomSheet.SetBackAlpha(0.33);
    
    
    cardLayout = app.CreateLayout('Card', 'FillX,VCenter,Top');
    
    
    if (options.toLowerCase().includes('nocorner')){
        cardLayout.SetCornerRadius(0);
        }
    else {
        cardLayout.SetCornerRadius(28);
    }
    
    cardLayout.AddChild(sheetLayout);
    cardLayout.SetBackColor(surfaceVariant)
    bottomSheet.AddChild(cardLayout);
    
    cardLayout.Animate('BounceBottom', null, 550);
    
    app.AddLayout(bottomSheet);
    
    bottomSheetObject.prototype.Dismiss = function(){
       cardLayout.Animate('SlideToBottom', function(){
            cardLayout.RemoveChild(sheetLayout);
            app.RemoveLayout(bottomSheet)
        }, 210); 
    }
}


var switchValue = createSignal();


function switchObject(switch