Universal

3.7.9

templates/Samples.ps1

function New-UDDemo {
    param([Switch]$Navigation)

    function New-UDComponentDemo {
        param(
            $Title,
            $Description,
            $Content,
            $Icon,
            $Command) 
    
        $Header = New-UDCardHeader -Avatar (New-UDIcon -Icon $Icon -Size '2x') -Title $Title -SubHeader $Description
        $Body = New-UDCardBody -Content {
    
            New-UDTabs -RenderOnActive -Tabs {
                New-UDTab -Text 'Demo' -Icon (New-UDIcon -Icon eye) -Content {
                    New-UDElement -Tag 'div' -Content {} -Attributes @{
                        style = @{
                            height = "20px"
                        }
                    }
                    & $Content 
                }
                New-UDTab -Text 'Code' -Icon (New-UDIcon -Icon code) -Content {
                    $Code = $Content.ToString()
                    $Lines = $Code -split '\r?\n'
                    $FirstLine = $Lines | Select-Object -First 1 -Skip 1
                    $StartingWhiteSpace = $FirstLine.Length - ($FirstLine.TrimStart().Length)
    
                    $Code = ''
                    $Lines | ForEach-Object {
                        if ($_.Length -ge $StartingWhiteSpace) {
                            $Code += $_.Substring($StartingWhiteSpace) + ([Environment]::NewLine)
                        }
                    }
    
                    New-UDButton -Icon (New-UDIcon -Icon 'Copy') -Style @{
                        right = 0
                    } -OnClick {
                        Set-UDClipboard -Data $Code
                        Show-UDToast -Message 'Copied!'
                    }

                    New-UDSyntaxHighlighter -Code $Code -Style 'oneDark' -ShowLineNumbers
                }
                New-UDTab -Text 'Help' -Icon (New-UDIcon -Icon CircleQuestion) -Content {
                    New-UDExpansionPanelGroup -Content {
                        $Command | ForEach-Object {
                            New-UDExpansionPanel -Title " $_" -Content {
                                New-UDElement -Tag 'pre' -Content {
                                    $CommandName = $_
                                    New-UDDynamic -Content {
                                        Get-Help -Name $CommandName -ErrorAction SilentlyContinue -Full | Out-String
                                    }
                                } -Attributes @{
                                    style = @{
                                        overflowX = "scroll"
                                    }
                                }
                            }
                        }    
                    }
                } -Dynamic
            }
        }
    
        $LinkId = $title.Replace(' ', '')

        if ($Navigation) {
            New-UDListItem -Label $title -Icon (New-UDIcon -Icon $Icon) -Href "/$LinkId"
        }
        else {
            New-UDPage -Name $Title -Url $LinkId  -Icon (New-UDIcon -Icon $Icon) -Content {
                New-UDCard -Header $Header -Body $Body -Id $LinkId
            }
        }
    }

    New-UDComponentDemo -Title 'Alerts' -Icon 'CircleExclamation' -Description 'Alerts provide a simple way to communicate information to a user.' -Command 'New-UDAlert' -Content {
        New-UDAlert -Severity 'error' -Content { New-UDHtml 'This is an error alert — <strong>check it out!</strong>' } -Title "Error"
        New-UDAlert -Severity 'warning' -Content { New-UDHtml 'This is an warning alert — <strong>check it out!</strong>' } -Title "Warning"
        New-UDAlert -Severity 'info' -Content { New-UDHtml 'This is an error info — <strong>check it out!</strong>' } -Title "Info"
        New-UDAlert -Severity 'success' -Content { New-UDHtml 'This is an success alert — <strong>check it out!</strong>' } -Title "Success"
    }

    New-UDComponentDemo -Title 'Autocomplete' -Icon 'CaretDown' -Description 'The autocomplete is a normal text input enhanced by a panel of suggested options.'  -Command 'New-UDAutocomplete' -Content {
        New-UDStack -Content {
            New-UDAutocomplete -Options @('Test', 'Test2', 'Test3', 'Test4')
            New-UDAutocomplete -OnLoadOptions { 
                @('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -like "*$Body*" } | ConvertTo-Json
            } -OnChange {
                Show-UDToast $Body 
            }
            New-UDAutocomplete -Options @("Test", "No", "Yes") -Icon (New-UDIcon -Icon 'Users') 
        } -Spacing 3 -Direction 'column'

    }

    New-UDComponentDemo -Title 'Avatar' -Icon 'User' -Description 'Avatars are found throughout material design with uses in everything from tables to dialog menus.' -Command 'New-UDAvatar' -Content {
        New-UDAvatar -Alt "Remy Sharp" -Image "/admin/logo.png" -Sx @{
            borderRadius = '50%'
        }
        New-UDAvatar -Alt "Remy Sharp" -Image "/admin/logo.png" -Variant square
        New-UDAvatar -Alt "Remy Sharp" -Content {
            "A"
        } -Sx @{
            borderRadius = '50%'
        }
        New-UDAvatar -Alt "Remy Sharp" -Content {
            "A"
        } -Variant square
        New-UDAvatarGroup -Content {
            1..10 | ForEach-Object { 
                New-UDAvatar -Alt "Remy Sharp" -Content {
                    "A"
                } -Sx @{
                    borderRadius    = '50%'
                    backgroundColor = 'error.dark'
                }
            }
        } -Sx @{
            width = "20%"
        }
    }

    New-UDComponentDemo -Title 'Badges' -Icon 'Certificate' -Description 'Badge generates a small badge to the top-right of its child(ren).'  -Command 'New-UDBadge' -Content {
        New-UDStack -Spacing 3 -Direction 'row' -Content {
            New-UDBadge -BadgeContent { 4 } -Children {
                New-UDIcon -Icon Envelope -Size 2x
            } -Color primary
            New-UDBadge -BadgeContent { 4 } -Children {
                New-UDIcon -Icon Envelope -Size 2x
            } -Color secondary
            New-UDBadge -BadgeContent { 4 } -Children {
                New-UDIcon -Icon Envelope -Size 2x
            } -Color success
        }
    }

    New-UDComponentDemo -Title 'Buttons' -Icon 'Stop' -Description 'Buttons allow users to take actions, and make choices, with a single tap.'  -Command 'New-UDDButton' -Content {
        New-UDButton -Variant 'contained' -Text 'Default'
        New-UDButton -Variant 'outlined' -Text 'Default'
        New-UDButton -Id "Submit" -Text "Submit" -Style @{ Width = "150px"; Height = "100px" }
        New-UDButton -Icon (New-UDIcon -Icon trash) -Text 'Delete'
        New-UDButton -Text 'Message Box' -OnClick {
            Show-UDToast -Message 'Hello, world!'
        }
        New-UDButton -Text 'Message Box' -OnClick {
            Show-UDToast -Message 'Hello, world!'
            Start-Sleep 10
        } -ShowLoading
    }

    New-UDComponentDemo -Title 'Cards' -Icon 'AddressCard' -Description 'Cards contain content and actions about a single subject.'  -Command 'New-UDCard' -Content {
        New-UDCard -Title 'Simple Card' -Content {
            "This is some content"
        }  -Style @{
            border = '2px solid #f0f2f5'
        }
 

        $Body = New-UDCardBody -Content {
            New-UDTypography -GutterBottom -Text 'Word of the Day' -Sx @{
                fontSize = '14'
                color    = 'text.secondary'
            }
            New-UDTypography -Variant 'h5' -Text 'be•nev•o•lent'
            New-UDTypography -Text 'adjective' -Sx @{
                mb    = 1.5
                color = 'text.secondary'
            }
            New-UDTypography -Variant 'body2' -Text 'well meaning and kindly'
        } 
        $Actions = New-UDCardFooter -Content {
            New-UDButton -Text 'Learn More'
        }
        New-UDCard -Body $Body -Footer $Actions -Style @{
            border = '2px solid #f0f2f5'
        }

        $Header = New-UDCardHeader -Avatar (New-UDAvatar -Content { "R" } -Sx @{ backgroundColor = "#f44336" }) -Action (New-UDIconButton -Icon (New-UDIcon -Icon 'EllipsisVertical')) -Title 'Shrimp and Chorizo Paella' -SubHeader 'September 14, 2016';
        $Media = New-UDCardMedia -Image 'https://mui.com/static/images/cards/paella.jpg'
        $Body = New-UDCardBody -Content {
            New-UDTypography -Text ' This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.' -Sx @{
                color = 'text.secondary'
            } -Variant body2
        }
        $Footer = New-UDCardFooter -Content {
            New-UDIconButton -Icon (New-UDIcon -Icon 'Heart')
            New-UDIconButton -Icon (New-UDIcon -Icon 'ShareAlt')
        }
        $Expand = New-UDCardExpand -Content {
            $Description = @"
            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
            medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
            occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
            large plate and set aside, leaving chicken and chorizo in the pan. Add
            pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
            stirring often until thickened and fragrant, about 10 minutes. Add
            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
"@
            New-UDTypography -Text $Description
        }
        New-UDCard -Header $Header -Media $Media -Body $Body -Footer $Footer -Expand $Expand -Sx @{
            maxWidth = 345
            border   = '2px solid #f0f2f5'
        }
    }


    New-UDComponentDemo -Title 'Charts' -Icon 'ChartSimple' -Description 'Visual data in charts.'  -Command 'New-UDNivoChart' -Content {
        $Data = 1..10 | ForEach-Object { 
            $item = Get-Random -Max 1000 
            [PSCustomObject]@{
                Name  = "Test$item"
                Value = $item
            }
        }
        New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000
    }

    New-UDComponentDemo -Title 'Checkboxes' -Icon 'SquareCheck' -Description 'Checkboxes allow the user to select one or more items from a set.'  -Command 'New-UDCheckbox' -Content {
        New-UDCheckBox
        New-UDCheckBox -Disabled
        New-UDCheckBox -Checked $true
        New-UDCheckBox -Checked $true -Disabled
        $Icon = New-UDIcon -Icon angry -Size lg 
        $CheckedIcon = New-UDIcon -Icon angry -Size lg
        New-UDCheckBox -Icon $Icon -CheckedIcon $CheckedIcon -Style @{color = '#2196f3' }
        New-UDCheckBox -OnChange {
            Show-UDToast -Title 'Checkbox' -Message $Body
        }
        New-UDCheckBox -Label 'Demo' -LabelPlacement start
        New-UDCheckBox -Label 'Demo' -LabelPlacement top
        New-UDCheckBox -Label 'Demo' -LabelPlacement bottom
        New-UDCheckBox -Label 'Demo' -LabelPlacement end
    }

    New-UDComponentDemo -Title 'Chip' -Icon 'Cookie' -Description 'Chips are compact elements that represent an input, attribute, or action.'  -Command 'New-UDChip' -Content {
        New-UDStack -Spacing 3 -Direction 'row' -Content {
            New-UDChip -Label 'Basic' -Icon (New-UDIcon -Icon 'user')
            New-UDChip -Label 'OnClick' -OnClick {
                Show-UDToast -Message 'Hello!'
            }
        }
    }

    New-UDComponentDemo -Title 'Code Editor' -Icon 'Code' -Description 'The code editor component allows you to host the Microsoft Monaco editor within your dashboards.'  -Command 'New-UDCodeEditor' -Content {
        New-UDCodeEditor -Height '200' -Language 'powershell' -Code 'New-UDAlert -Title "Warning!"' -Theme 'vs-dark'
    }
    
    New-UDComponentDemo -Title 'Data Grid' -Icon 'TableCells' -Description 'Data tables display information in a grid-like format of rows and columns. They organize information in a way that''s easy to scan so that users can look for patterns and insights.' -Command 'New-UDDataGrud' -Content {
        $Data = 1..10000 | ForEach-Object {
            @{ Name = 'Adam'; Number = Get-Random }
        } 
        New-UDDataGrid -LoadRows {  
            function Out-UDDataGridData {
                param(
                    [Parameter(Mandatory)]
                    $Context,
                    [Parameter(Mandatory, ValueFromPipeline)]
                    [object]$Data,
                    [Parameter()]
                    [int]$TotalRows = -1
                )
                Begin {
                    $Items = [System.Collections.ArrayList]::new()
                }
                Process {
                    $Items.Add($Data) | Out-Null
                }

                End {
                    if ($null -ne $Context.Filter.Items -and $Context.Filter.Items.Count -gt 0) {
                        $linkOperator = $Context.Filter.linkOperator
                        $filterTextArray = @()
                        foreach ($filter in $Context.Filter.Items) {
                            $property = $Filter.columnField
                            $val = $filter.Value
                            switch ($filter.operatorValue) {
                                "contains" { $filterTextArray += "obj.$property -like ""*$val*""" }
                                "equals" { $filterTextArray += "obj.$property -eq ""*$val*""" }
                                "startsWith" { $filterTextArray += "obj.$property -like ""$val*""" }
                                "endsWith" { $filterTextArray += "obj.$property -like ""*$val""" }
                                "isAnyOf" { $filterTextArray += "obj.$property -in ""$val""" }
                                "notequals" { $filterTextArray += "obj.$property -ne ""$val""" }
                                "notcontains" { $filterTextArray += "obj.$property -notlike ""*$val*""" }
                                "isEmpty" { $filterTextArray += "obj.$property -eq null" }
                                "isNotEmpty" { $filterTextArray += "obj.$property -ne null" }
                            }
                        }
                        if ($linkOperator -eq 'and') {
                            [string]$filterTextLine = $filterTextArray -join " -and "
                        }
                        else {
                            [string]$filterTextLine = $filterTextArray -join " -or "
                        }

                        $filterTextLine = $filterTextLine.Replace('obj', '$_')
                        $filterTextLine = $filterTextLine.Replace('null', '$null')
                        $filterScriptBlock = [Scriptblock]::Create($filterTextLine)
                        $Items = $Items | Where-Object -FilterScript $filterScriptBlock
                    }

                    if ($null -ne $Items) {
                        $TotalRows = $Items.Count
                    }
                    else {
                        $TotalRows = 0
                    }

                    $Sort = $Context.Sort[0]
                    $Items = $Items | Sort-Object -Property $Sort.field -Descending:$($Sort.Sort -eq 'desc')
                    $Items = $Items | Select-Object -Skip ($Context.Page * $Context.pageSize) -First $Context.PageSize

                    @{
                        rows     = [Array]$Items
                        rowCount = $TotalRows
                    }
                }   
            }


            $Data | Out-UDDataGridData -Context $EventData
        } -Columns @(
            @{ field = "name"; render = { 
                    New-UDButton -Icon (New-UDIcon -Icon User) -OnClick { Show-UDToast $EventData.Name } } 
            }
            @{ field = "number" }
        ) -AutoHeight -Pagination 
    }

    New-UDComponentDemo -Title 'Date and Time' -Icon 'Clock' -Description 'Date and time component for Universal Dashboard.' -Content {
        New-UDStack -Direction 'column' -Content {
            New-UDDateTime -InputObject (Get-Date)
            New-UDDateTime -InputObject (Get-Date) -Format 'DD/MM/YYYY'
            New-UDDateTime -InputObject (Get-Date) -Locale 'es'
        }
    }

    New-UDComponentDemo -Title 'Date Picker' -Icon 'Calendar' -Description 'Date pickers pickers provide a simple way to select a single value from a pre-determined set.'  -Command 'New-UDDatePicker' -Content {
        New-UDDatePicker -OnChange {
            Show-UDToast -Message $body
        }
        New-UDDatePicker -Variant static
        New-UDDatePicker -Locale fr
        New-UDDatePicker -Minimum ((Get-Date).AddDays(-15)) -Maximum ((Get-Date).AddDays(15))
    }

    New-UDComponentDemo -Title 'Editor' -Icon 'Paragraph' -Description 'Text editor component.' -Content {
        New-UDEditor -OnChange {
            Show-UDToast $EventData
        } -Format 'html'
    }

    New-UDComponentDemo -Title 'Element' -Icon 'PuzzlePiece' -Description 'Create HTML elements.' -Content {
        New-UDElement -Tag 'div' -Content {
            New-UDTypography -Text 'Hello!'
        } -Attributes @{
            onClick = {
                Show-UDToast -Message "Clicked!"
            }
            style   = @{
                backgroundColor = 'red'
                color           = 'blue'
                padding         = '20px'
            }
        }
    }

    New-UDComponentDemo -Title 'Expansion Panel' -Icon 'Expand' -Description 'Expansion panels contain creation flows and allow lightweight editing of an element.'   -Command 'New-UDExpansionPanel' -Content {
        New-UDExpansionPanelGroup -Children {
            New-UDExpansionPanel -Title "Hello" -Children {}

            New-UDExpansionPanel -Title "Hello" -Id 'expContent' -Children {
                New-UDElement -Tag 'div' -Content { "Hello" }
            }
        }
    }

    New-UDComponentDemo -Title 'Grid' -Icon 'TableCells' -Description 'The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.'   -Command 'New-UDGrid' -Content {
        New-UDGrid -Container -Content {
            New-UDGrid -Item -ExtraSmallSize 12 -Content {
                New-UDPaper -Content { "xs-12" } -Elevation 2
            }
            New-UDGrid -Item -ExtraSmallSize 6 -Content {
                New-UDPaper -Content { "xs-6" } -Elevation 2
            }
            New-UDGrid -Item -ExtraSmallSize 6 -Content {
                New-UDPaper -Content { "xs-6" } -Elevation 2
            }
            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }
            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }
            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }
            New-UDGrid -Item -ExtraSmallSize 3 -Content {
                New-UDPaper -Content { "xs-3" } -Elevation 2
            }
        }

        New-UDDynamic -Id 'spacingGrid' -Content {
            $Spacing = (Get-UDElement -Id 'spacingSelect').value

            New-UDGrid -Spacing $Spacing -Container -Content {
                New-UDGrid -Item -ExtraSmallSize 3 -Content {
                    New-UDPaper -Content { "xs-3" } -Elevation 2
                }
                New-UDGrid -Item -ExtraSmallSize 3 -Content {
                    New-UDPaper -Content { "xs-3" } -Elevation 2
                }
                New-UDGrid -Item -ExtraSmallSize 3 -Content {
                    New-UDPaper -Content { "xs-3" } -Elevation 2
                }
                New-UDGrid -Item -ExtraSmallSize 3 -Content {
                    New-UDPaper -Content { "xs-3" } -Elevation 2
                }
            }
        }

        New-UDSelect -Id 'spacingSelect' -Label Spacing -Option {
            for ($i = 0; $i -lt 10; $i++) {
                New-UDSelectOption -Name $i -Value $i
            }
        } -OnChange { Sync-UDElement -Id 'spacingGrid' } -DefaultValue 3
    }

    New-UDComponentDemo -Title 'Icons' -Icon 'FontAwesome' -Description 'FontAwesome icons to include in your dashboard.'  -Command 'New-UDIcon' -Content {
        New-UDStack -Direction 'column' -Spacing 4 -Content {
            New-UDIcon -Icon 'NetworkWired'
            New-UDStack -Direction 'row' -Content {
                New-UDIcon -Icon 'AddressBook' -Size 'sm'
                New-UDIcon -Icon 'AddressBook' -Size 'lg'
                New-UDIcon -Icon 'AddressBook' -Size '5x'
                New-UDIcon -Icon 'AddressBook' -Size '10x'
            }
            New-UDIcon -Icon 'AddressBook' -Size '5x' -Rotation 90
            New-UDIcon -Icon 'AddressBook' -Size '5x' -Border
            New-UDTextbox -Id 'txtIconSearch' -Label 'Search' 
            New-UDButton -Text 'Search' -OnClick {
                Sync-UDElement -Id 'icons'
            }

            New-UDElement -Tag 'p' -Content {}

            New-UDDynamic -Id 'icons' -Content {
                $IconSearch = (Get-UDElement -Id 'txtIconSearch').value
                if ($null -ne $IconSearch -and $IconSearch -ne '') {
                    $Icons = $Icons = Find-UDIcon -Name $IconSearch
                }

                foreach ($icon in $icons) {
                    try {
                        New-UDChip -Label $icon -Icon (New-UDIcon -Icon $icon)
                    }
                    catch {
                        New-UDChip -Label "$icon Unknown" 
                    }
                }
            }
        }
    }

    New-UDComponentDemo -Title 'Interaction' -Icon 'ComputerMouse' -Description 'Interact with elements on the dashboard.' -Command 'New-UDFloatingActionButton' -Content {
        New-UDExpansionPanelGroup -Content {
            New-UDExpansionPanel -Title 'Get-UDElement' -Content {
                New-UDTextbox -Id 'txtBox1' -Label 'Textbox'
                New-UDButton -Text 'Get text box value' -OnClick {
                    $tb = Get-UDElement -Id 'txtBox1'
                    Show-UDToast $tb.Value
                }
            }
            New-UDExpansionPanel -Title 'Set-UDElement' -Content {
                New-UDTextbox -Id 'txtBox2' -Label 'Textbox'
                New-UDButton -Text 'Set text box value' -OnClick {
                    Set-UDElement -Id 'txtBox2' -Properties @{
                        value = "This is a value"
                    }
                }
            }
            New-UDExpansionPanel -Title 'Remove-UDElement' -Content {
                New-UDTextbox -Id 'txtBox3' -Label 'Textbox'
                New-UDButton -Text 'Remove the textbox' -OnClick {
                    Remove-UDElement -Id 'txtBox3'
                }
            }
            New-UDExpansionPanel -Title 'Sync-UDElement' -Content {
                New-UDDynamic -Id 'time' -Content {
                    New-UDTypography (Get-Date)
                }
                New-UDButton -Text 'Reload the time' -OnClick {
                    Sync-UDElement -Id 'time'
                }
            }
            New-UDExpansionPanel -Title 'Add-UDElement' -Content {
                New-UDElement -Id 'parent' -Tag 'div' -Content {

                }
                New-UDButton -Text 'Add an element' -OnClick {
                    Add-UDElement -ParentId 'parent' -Content {
                        New-UDTypography -Text 'Added!'
                    }
                }
            }
            New-UDExpansionPanel -Title 'Clear-UDElement' -Content {
                New-UDElement -Id 'parent2' -Tag 'div' -Content {
                    New-UDTypography -Text 'Added!'
                    New-UDTypography -Text 'Added!'
                    New-UDTypography -Text 'Added!'
                }
                New-UDButton -Text 'Add an element' -OnClick {
                    Clear-UDElement -Id 'parent2'
                }
            }
        }
    }


    New-UDComponentDemo -Title 'Floating Action Button' -Icon 'Ghost' -Description 'A floating action button (FAB) performs the primary, or most common, action on a screen.'   -Command 'New-UDFloatingActionButton' -Content {
        New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Small
        New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Medium
        New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Large
    }

    New-UDComponentDemo -Title 'Form' -Icon 'RectangleList' -Description 'Forms provide a way to collect data from users.'   -Command 'New-UDForm' -Content {
        New-UDForm -Content {

            New-UDRow -Columns {
                New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
                    New-UDTextbox -Id 'txtFirstName' -Label 'First Name' 
                }
                New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
                    New-UDTextbox -Id 'txtLastName' -Label 'Last Name'
                }
            }

            New-UDTextbox -Id 'txtAddress' -Label 'Address'

            New-UDRow -Columns {
                New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
                    New-UDTextbox -Id 'txtState' -Label 'State'
                }
                New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
                    New-UDTextbox -Id 'txtZipCode' -Label 'ZIP Code'
                }
            }

        } -OnSubmit {
            Show-UDToast -Message $EventData.txtFirstName
            Show-UDToast -Message $EventData.txtLastName
        }
    }

    New-UDComponentDemo -Title 'Images' -Icon 'Image' -Description 'Display images'   -Command 'New-UDImage' -Content {
        New-UDImage -Url "https://ironmansoftware.com/img/ps-logo.png"
    }

    New-UDComponentDemo -Title 'Links' -Icon 'Link' -Description 'Create a hyper link in a dashboard'   -Command 'New-UDLink' -Content {
        New-UDStack -Direction 'column' -Spacing 4 -Content {
            New-UDLink -Text 'Ironman Software' -url https://www.ironmansoftware.com
            New-UDLink -Text 'Ironman Software' -url https://www.ironmansoftware.com -Variant h2 -Underline always
            New-UDLink -Text 'Ironman Software' -url https://www.ironmansoftware.com -OpenInNewWindow
            New-UDLink -Text 'Ironman Software' -OnClick {
                Show-UDToast "Hello!"
            }
        }
    }

    New-UDComponentDemo -Title 'Lists' -Icon 'List' -Description 'Lists are continuous, vertical indexes of text or images.'   -Command 'New-UDList' -Content {
        New-UDList -Content {
            New-UDListItem -Label 'Inbox' -Icon (New-UDIcon -Icon envelope -Size 3x) -SubTitle 'New Stuff'
            New-UDListItem -Label 'Drafts' -Icon (New-UDIcon -Icon edit -Size 3x) -SubTitle "Stuff I'm working on "
            New-UDListItem -Label 'Trash' -Icon (New-UDIcon -Icon trash -Size 3x) -SubTitle 'Stuff I deleted'
            New-UDListItem -Label 'Spam' -Icon (New-UDIcon -Icon bug -Size 3x) -SubTitle "Stuff I didn't want"
        }
    }

    
    New-UDComponentDemo -Title 'Maps' -Icon 'MapLocationDot' -Description 'Render complex maps'   -Command 'New-UDMap' -Content {
        New-UDMap -Endpoint {
            New-UDMapRasterLayer -TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        } -Latitude 43.52107 -Longitude -114.31644 -Zoom 13 -Height '100vh'
    }

    New-UDComponentDemo -Title 'Menu' -Icon 'EllipsisV' -Description 'Menus display a list of choices on temporary surfaces.'   -Command @('New-UDMenu', 'New-UDMenuItem') -Content {
        New-UDStack -Spacing 1 -Direction column -Content {
            New-UDMenu -Text 'Basic Menu' -Content {
                New-UDMenuItem -Text 'Item 1'
                New-UDMenuItem -Text 'Item 1'
                New-UDMenuItem -Text 'Item 1'
            }

            New-UDMenu -Text 'On Change' -OnChange {
                Show-UDToast $EventData
            } -Children {
                New-UDMenuItem -Text 'Test'
                New-UDMenuItem -Text 'Test2'
                New-UDMenuItem -Text 'Test3'
            }

            New-UDMenu -Text 'Icons' -Children {
                New-UDMenuItem -Text 'Add' -Icon (New-UDIcon -Icon 'Add')
                New-UDMenuItem -Text 'Profile' -Icon (New-UDIcon -Icon 'AddressCard')
                New-UDMenuItem -Text 'Home' -Icon (New-UDIcon -Icon 'Home')
            }
        }

    }


    New-UDComponentDemo -Title 'Modals' -Icon 'WindowMaximize' -Description 'Modals inform users about a task and can contain critical information, require decisions, or involve multiple tasks.' -Command 'Show-UDModal' -Content {
        New-UDButton -Text 'Basic' -OnClick {
            Show-UDModal -Content {
                New-UDTypography -Text "Hello"
            }
        }
        New-UDButton -Text 'Full Screen' -OnClick {
            Show-UDModal -Content {
                New-UDTypography -Text "Hello"
            } -Footer {
                New-UDButton -Text "Close" -OnClick { Hide-UDModal }
            }  -FullScreen
        }
        New-UDButton -Text 'Full Width' -OnClick {
            Show-UDModal -Content {
                New-UDTypography -Text "Hello"
            } -FullWidth -MaxWidth 'md'
        }
        New-UDButton -Text 'Persistent' -OnClick {
            Show-UDModal -Content {
                New-UDTypography -Text "Hello"
            } -Footer {
                New-UDButton -Text "Close" -OnClick { Hide-UDModal }
            } -Persistent
        }
    }

    New-UDComponentDemo -Title 'Progress' -Icon 'Spinner' -Description 'Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.'   -Command 'New-UDProgress' -Content {
        New-UDProgress -Circular -Color Blue
        New-UDProgress
        New-UDProgress -PercentComplete 75
    }

    New-UDComponentDemo -Title 'Radio' -Icon 'CircleDot' -Description 'Radio buttons allow the user to select one option from a set.' -Command 'New-UDRadio' -Content {
        New-UDRadioGroup -Label "Day" -Content {
            New-UDRadio -Label Monday -Value 'monday'
            New-UDRadio -Label Tuesday -Value 'tuesday'
            New-UDRadio -Label Wednesday -Value 'wednesday'
            New-UDRadio -Label Thursday -Value 'thursday'
            New-UDRadio -Label Friday  -Value 'friday'
            New-UDRadio -Label Saturday -Value 'saturday'
            New-UDRadio -Label Sunday -Value 'sunday'
        }
    }

    New-UDComponentDemo -Title 'Rating' -Icon 'Star' -Description 'Ratings provide insight regarding others'' opinions and experiences, and can allow the user to submit a rating of their own.' -Command 'New-UDRating' -Content {
        New-UDStack -Direction 'column' -Content {
            New-UDRating 
            New-UDRating -OnChange {
                Show-UDToast $EventData
            }
            New-UDRating -Max 10
            New-UDRating -Precision .5
            New-UDRating -Size large
        }

    }

    New-UDComponentDemo -Title 'Scopes' -Icon 'UserGear' -Description 'Custom variable scopes to use in dashboards' -Content {

        New-UDStack -Direction 'column' -Content {
            New-UDTypography -Variant 'h5' -Text '$Cache:'
            New-UDTypography -Text 'Cache scope stores data for all users. It does not expire automatically, so use it wisely'

            if ($Cache:Demo) {
                New-UDTypography "Cache value: $Cache:Demo"
            }
            New-UDForm -Content {
                New-UDTextbox -Id 'cacheValue'
            } -OnSubmit {
                $Cache:Demo = $EventData.cacheValue 
                New-UDTypography "Value has been stored in the cache. Reload page to see value."
                New-UDButton -Text 'Reload Page' -OnClick {
                    Invoke-UDJavaScript -JavaScript 'window.location.reload()'
                }
            }

        }

        New-UDStack -Direction 'column' -Content {
            New-UDTypography -Variant 'h5' -Text '$Page:'
            New-UDTypography -Text 'Page scope stores data for the current page (e.g. tab). The data won''t be available across tabs and will be removed once the tab is closed.'

            New-UDForm -Content {
                New-UDTextbox -Id 'cacheValue'
            } -OnSubmit {
                $Page:Demo = $EventData.cacheValue 
                New-UDTypography "Value has been stored in the page scope."

            }

            New-UDButton -Text 'Show Page Data' -OnClick {
                Show-UDToast $Page:Demo
            }
        }

        New-UDStack -Direction 'column' -Content {
            New-UDTypography -Variant 'h5' -Text '$Session:'
            New-UDTypography -Text 'Session scope stores data with the current user''s session. If you reload the page, the data will still be stored. If you open a new tab, the same data is available.'

            New-UDDynamic -Content {
                if ($Session:Demo) {
                
                    New-UDTypography "Session value: $Session:Demo"
                }
            }
            New-UDForm -Content {
                New-UDTextbox -Id 'cacheValue'
            } -OnSubmit {
                $Session:Demo = $EventData.cacheValue 
                New-UDTypography "Value has been stored in the session. Reload page to see value."
                New-UDButton -Text 'Reload Page' -OnClick {
                    Invoke-UDJavaScript -JavaScript 'window.location.reload()'
                }
            }
        }
    }

    New-UDComponentDemo -Title 'Select' -Icon 'RectangleList' -Description 'Select components are used for collecting user provided information from a list of options.' -Command 'New-UDSelect' -Content {
        New-UDStack -Direction 'column' -Content {
            New-UDSelect -Option {
                New-UDSelectOption -Name 'One' -Value 1
                New-UDSelectOption -Name 'Two' -Value 2
                New-UDSelectOption -Name 'Three' -Value 3
            }
            New-UDSelect -Option {
                New-UDSelectGroup -Name 'Group One' -Option {
                    New-UDSelectOption -Name 'One' -Value 1
                    New-UDSelectOption -Name 'Two' -Value 2
                    New-UDSelectOption -Name 'Three' -Value 3
                }
                New-UDSelectGroup -Name 'Group Two' -Option {
                    New-UDSelectOption -Name 'Four' -Value 4
                    New-UDSelectOption -Name 'Five' -Value 5
                    New-UDSelectOption -Name 'Size' -Value 6
                }
            }
            New-UDSelect -Option {
                New-UDSelectOption -Name 'One' -Value 1
                New-UDSelectOption -Name 'Two' -Value 2
                New-UDSelectOption -Name 'Three' -Value 3
            } -OnChange { Show-UDToast -Message $EventData }
        }
    }

    New-UDComponentDemo -Title 'Skeleton' -Icon 'BarsProgress' -Description 'A skeleton is a form of a loading component that can show a placeholder while data is received.'  -Command 'New-UDSkeleton' -Content {
        New-UDSkeleton
        New-UDSkeleton -Variant circle -Width 40 -Height 40
        New-UDSkeleton -Variant rect -Width 210 -Height 118
        New-UDSkeleton
        New-UDSkeleton -Animation disabled
        New-UDSkeleton -Animation wave
    }

    New-UDComponentDemo -Title 'Slider' -Icon 'Sliders' -Description 'Sliders allow users to make selections from a range of values.'  -Command 'New-UDSlider' -Content {
        New-UDStack -Direction 'column' -Content {
            New-UDSlider -Value 1
            New-UDSlider -Min 10 -Max 1000
            New-UDSlider -Disabled
            New-UDSlider -Min 10 -Max 1000 -Step 100
            New-UDSlider -Marks
            New-UDSlider -Value @(1, 10)
            New-UDSlider -OnChange {
                Show-UDToast -Message $Body 
                Set-TestData $Body
            }
        }
    }

    New-UDComponentDemo -Title 'Stepper' -Icon 'ForwardStep' -Description 'Steppers convey progress through numbered steps. It provides a wizard-like workflow.'   -Command 'New-UDStepper' -Content {
        New-UDStepper -Steps {
            New-UDStep -OnLoad {
                New-UDElement -Tag 'div' -Content { "Step 1" }
                New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
            } -Label "Step 1"
            New-UDStep -OnLoad {
                New-UDElement -Tag 'div' -Content { "Step 2" }
                New-UDElement -Tag 'div' -Content { "Previous data: $Body" }
                New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
            } -Label "Step 2"
            New-UDStep -OnLoad {
                New-UDElement -Tag 'div' -Content { "Step 3" }
                New-UDElement -Tag 'div' -Content { "Previous data: $Body" }
                New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
            } -Label "Step 3"
        } -OnFinish {
            New-UDTypography -Text 'Nice! You did it!' -Variant h3
            New-UDElement -Tag 'div' -Id 'result' -Content { $Body }
        }
    }

    New-UDComponentDemo -Title 'Switch' -Icon 'ToggleOn' -Description 'Switches toggle the state of a single setting on or off.'  -Command 'New-UDSwitch' -Content {
        New-UDSwitch -Checked $true 
        New-UDSwitch -Checked $true -Disabled
        New-UDSwitch -OnChange { Show-UDToast -Message $EventData }
        New-UDSwitch -CheckedLabel 'Dark' -UncheckedLabel 'Light'
    }

    New-UDComponentDemo -Title 'Table' -Icon 'Table' -Description 'Tables display sets of data. They can be fully customized.'  -Command 'New-UDTable' -Content {
        $Columns = @(
            New-UDTableColumn -Property Name -Title "Name" -ShowFilter
            New-UDTableColumn -Property Value -Title "Value" -ShowFilter
        )

        $Data = 1..1000 | ForEach-Object {
            [PSCustomObject]@{
                Name  = "Record-$_"
                Value = $_ 
            }
        }

        New-UDTable -Columns $Columns -LoadData {
            foreach ($Filter in $EventData.Filters) {
                $Data = $Data | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
            }

            $TotalCount = $Data.Count 

            if (-not [string]::IsNullOrEmpty($EventData.OrderBy.Field)) {
                $Descending = $EventData.OrderDirection -ne 'asc'
                $Data = $Data | Sort-Object -Property ($EventData.orderBy.Field) -Descending:$Descending
            }
    
            $Data = $Data | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)

            $Data | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties 
        } -ShowFilter -ShowSort -ShowPagination -ToolbarContent { 
            New-UDButton -Text 'Documentation' -Icon (New-UDIcon -Icon book)
        } -Title "Table Demo"
    }

    New-UDComponentDemo -Title 'Tabs' -Icon 'Tablet' -Description 'Tabs make it easy to explore and switch between different views.'  -Command 'New-UDTabs' -Content {
        New-UDStack -Direction 'column' -Content {
            New-UDTabs -Tabs {
                New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' }
                New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' }
                New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' }
            }

            New-UDTabs -Tabs {
                New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' }
                New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' }
                New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' }
            } -Orientation vertical

            New-UDTabs -Tabs {
                New-UDTab -Text 'Item One' -Content { Get-Date } -Dynamic
                New-UDTab -Text 'Item Two' -Content { Get-Date } -Dynamic
                New-UDTab -Text 'Item Three' -Content { Get-Date } -Dynamic
            } -RenderOnActive
        }
    }

    New-UDComponentDemo -Title 'Textbox' -Icon 'Keyboard' -Description 'A textbox lets users enter and edit text.'  -Command 'New-UDTextbox' -Content {
        New-UDStack -Direction 'column' -Content {
            New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
            New-UDTextbox -Label 'Disabled' -Placeholder 'Textbox' -Disabled
            New-UDTextbox -Label 'Textbox' -Value 'With value'
            New-UDTextbox -Label 'Password' -Type password 
            New-UDTextbox -Label 'Number' -Type number
            New-UDTextbox -Label 'time' -Type time
            New-UDTextbox -Label 'datetime' -Type datetime-local
            New-UDTextbox -Label 'date' -Type date
            New-UDTextbox -Label 'color' -Type color
            New-UDTextbox -Multiline -Rows 4 -RowsMax 10
            New-UDTextbox -Id "ServerGroups" -Icon (New-UDIcon -Icon 'server') -Value "This is my server"
        }
    }

    New-UDComponentDemo -Title 'Timeline' -Icon 'Timeline' -Description 'The timeline displays a list of events in chronological order.' -Command 'New-UDTimeline' -Content {
        New-UDTimeline -Children {
            New-UDTimelineItem -Content {
                'Breakfast'
            } -OppositeContent {
                '7:45 AM'
            } 
            New-UDTimelineItem -Content {
                'Welcome Message'
            } -OppositeContent {
                '9:00 AM'
            }
            New-UDTimelineItem -Content {
                'State of the Shell'
            } -OppositeContent {
                '9:30 AM'
            }
            New-UDTimelineItem -Content {
                'General Session'
            } -OppositeContent {
                '11:00 AM'
            }
        } -Position alternate
    }

    New-UDComponentDemo -Title 'Time Picker' -Icon 'Clock' -Description 'Time pickers pickers provide a simple way to select a single value from a pre-determined set.'  -Command 'New-UDTimePicker' -Content {
        New-UDStack -Direction 'column' -Content {
            New-UDTimePicker
            New-UDTimePicker -Locale fr
            New-UDTimePicker -DisableAmPm
        }
    }

    New-UDComponentDemo -Title 'Tooltip' -Icon 'Readme' -Description 'Tooltips display informative text when users hover over, focus on, or tap an element.'  -Command 'New-UDTooltip' -Content {
        New-UDTooltip -Content {
            New-UDIcon -Icon 'User' -Size '3x'
        } -TooltipContent {
            "User"
        }

        New-UDTooltip -Content {
            New-UDIcon -Icon 'User' -Size '3x'
        } -TooltipContent {
            "User"
        } -Place 'bottom'

        New-UDTooltip -Content {
            New-UDIcon -Icon 'User' -Size '3x'
        } -TooltipContent {
            New-UDPaper -Children {
                "User"
            }
        }

        New-UDTooltip -Content {
            New-UDIcon -Icon 'User' -Size '3x'
        } -TooltipContent {
            "User"
        } -Type 'success'
    }

    New-UDComponentDemo -Title 'Transfer List' -Icon 'RightLeft' -Description 'A transfer list (or "shuttle") enables the user to move one or more list items between lists.'  -Command 'New-UDTransferList' -Content {
        New-UDTransferList -Item {
            New-UDTransferListItem -Name 'test1' -Value 1
            New-UDTransferListItem -Name 'test2' -Value 2
            New-UDTransferListItem -Name 'test3' -Value 3
            New-UDTransferListItem -Name 'test4' -Value 4
            New-UDTransferListItem -Name 'test5' -Value 5
        } 
    }

    New-UDComponentDemo -Title 'Tree View' -Icon 'Tree' -Description 'A tree view component presents a hierarchical list.'  -Command 'New-UDTreeView' -Content {
        New-UDTreeView -Node {
            New-UDTreeNode -Name 'Level 1' -Children {
                New-UDTreeNode -Name 'Level 2 - Item 1' 
                New-UDTreeNode -Name 'Level 2 - Item 2'
                New-UDTreeNode -Name 'Level 2 - Item 3' -Children {
                    New-UDTreeNode -Name 'Level 3'
                }
            }
        }
    }

    New-UDComponentDemo -Title 'Typography' -Icon 'Font' -Description 'Use typography to present your design and content as clearly and efficiently as possible.'  -Command 'New-UDTypography' -Content {
        @("h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", 
            "caption", "button", "overline", "srOnly", "inherit", 
            "display4", "display3", "display2", "display1", "headline", "title", "subheading") | ForEach-Object {
            New-UDTypography -Variant $_ -Text $_ -GutterBottom
            New-UDElement -Tag 'p' -Content {}
        }
    }

    New-UDComponentDemo -Title 'Upload' -Icon 'Upload' -Description 'The UDUpload component is used to upload files to Universal Dashboard.'  -Command 'New-UDUpload' -Content {
        New-UDUpload -OnUpload {
            Show-UDToast $Body
        } -Text 'Upload'
    } 
}

$Pages = New-UDDemo
$Navigation = New-UDDemo -Navigation

$Pages = @(New-UDPage -Name 'About' -Content {
        New-UDGrid -Container -Content {
            New-UDGrid -Item -MediumSize 6 -SmallSize 12 -Content {
                New-UDImage -Url '/admin/logo.png'
                New-UDTypography -Variant h2 -Text 'A single pane of glass for your automation environment.'
                New-UDTypography -Variant h5 -Text 'PowerShell Unviersal allows you to create web interfaces for scripts, API endpoints and script scheduling.'
                New-UDButton -Icon (New-UDIcon -Icon 'Download') -Href "https://www.ironmansoftware.com/powershell-universal/downloads" -Text 'Get Started for Free'
            }
            New-UDGrid -Item -MediumSize 6 -SmallSize 12 -Content {
                New-UDGrid -Container -Content {
                    New-UDGrid -Item -SmallSize 6 -Content {
                        New-UDCard -Title 'APIs' -Content {
                            New-UDTypography "Invoke your PowerShell scripts over HTTP with RESTful API endpoints"
                            New-UDSyntaxHighlighter -Code "Invoke-RestMethod '/get' -Method 'GET' "
                        }
                    }
                    New-UDGrid -Item -SmallSize 6 -Content {
                        New-UDCard -Title 'Scripts and Scheduling' -Content {
                            New-UDTypography "Store your scripts in a single, easy to use environment. Schedule jobs with a system designed for PowerShell. Track who did what."
                            New-UDButton -Text 'See How' -Href "/admin/automation/scripts"
                        }
                    }
                }
                New-UDGrid -Container -Content {
                    New-UDGrid -Item -SmallSize 6 -Content {
                        New-UDCard -Title 'User Interfaces' -Content {
                            New-UDTypography "Create interfaces, like this one, using PowerShell scripts. Highly customizable. Super cool."
                            New-UDButton -Text 'See How' -Href "/admin/dashboards/1"
                        }
                    }
                    New-UDGrid -Item -SmallSize 6 -Content {
                        New-UDCard -Title 'Enterprise Features' -Content {
                            New-UDButton -Text 'Buy A License' -Href "https://ironmansoftware.com/pricing/powershell-universal" -Icon (New-UDIcon -Icon 'ShoppingCart')
                            New-UDList -Children {
                                New-UDListItem -Label 'SQL Support' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'Git Integration' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'High Availability' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'OpenID Connect' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'SAML2' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'WS-Federation' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'Role-Based Access Controls' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'Rate Limiting' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'Terminals' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                                New-UDListItem -Label 'Triggers' -Icon (New-UDIcon -Icon 'CheckCircle' -Color 'green')
                            }
                            
                        }
                    }
                }
            }
        }
    }) + $Pages

$Navigation = @(
    New-UDListItem -Label 'About' -Href '/About' -Icon (New-UDIcon -Icon 'CircleQuestion')
    New-UDListItem -Label 'Samples' -Icon (New-UDIcon -Icon 'BarChart') -Children {
        $Navigation
    }
    New-UDListItem -Label 'Admin Console' -Icon (New-UDIcon -Icon 'Toolbox') -OnClick {
        Invoke-UDRedirect -Url '/admin' -OpenInNewWindow -Native
    }
    New-UDListItem -Label 'Documentation' -Icon (New-UDIcon -Icon 'Book') -OnClick {
        Invoke-UDRedirect -Url "https://docs.powershelluniversal.com" -OpenInNewWindow -Native   
    }
    New-UDListItem -Label 'Forums' -Icon (New-UDIcon -Icon 'Users') -OnClick {
        Invoke-UDRedirect -Url "https://forums.ironmansoftware.com" -OpenInNewWindow -Native   
    }
    New-UDListItem -Label 'Licensing' -Icon (New-UDIcon -Icon 'CartShopping') -OnClick {
        Invoke-UDRedirect -Url "https://www.ironmansoftware.com/pricing/powershell-universal" -OpenInNewWindow -Native   
    }
)

New-UDDashboard -Title 'PowerShell Universal' -NavigationLayout permanent -Navigation $Navigation -Pages $Pages -Menu {
    New-UDMenuItem -Text 'Profile' -Icon (New-UDIcon -Icon 'User') 
    New-UDMenuItem -Text 'Change Password' -Icon (New-UDIcon -Icon 'Lock') -OnClick {
        Show-UDToast "Coming soon!"
    }
} #-Theme (Get-UDTheme -Name 'MaterialDesign')