Infsoft.WPE.App.UIComponents 0.0.21

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Infsoft.WPE.App.UIComponents --version 0.0.21                

                    
                

            
NuGet\Install-Package Infsoft.WPE.App.UIComponents -Version 0.0.21
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Infsoft.WPE.App.UIComponents" Version="0.0.21" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Infsoft.WPE.App.UIComponents --version 0.0.21                

                    
                

            
#r "nuget: Infsoft.WPE.App.UIComponents, 0.0.21"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install Infsoft.WPE.App.UIComponents as a Cake Addin
#addin nuget:?package=Infsoft.WPE.App.UIComponents&version=0.0.21

// Install Infsoft.WPE.App.UIComponents as a Cake Tool
#tool nuget:?package=Infsoft.WPE.App.UIComponents&version=0.0.21

Workplace Experience (WPE 3.0) Components Library for UI

This library contains common components used for displaying data.

Managers

Name Description File
IMouseManager.cs Can be used to subscribe to mouse click events and retrieve information about clicked dom elements Link
IScreenSizeManager.cs Can be used to subscribe to window size changes Link

Helpers

Name Description File
DelayedCallHelper.cs Can be used to delay changes Link
InputDebounceHelper.cs Can be used to delay string inputs from input fields Link

Components

Actions

Name Description File
Collapsible.razor Collapsible Link

Listeners

Name Description File
SwipeListener.razor Swipe Listener for mobile devices Link

Ions

Name Figma Component File
Serp_Image_Icon.razor ions/serp-img (Icon) Link
Serp_Image_Round.razor ions/serp-img (Round image) Link
Serp_Image_Rect.razor ions/serp-img (Rectangle image) Link
Seperator_Circle.razor - Link

Atoms

General
Name Figma Component File
Card_Background.razor atoms/card-background Link
Coffee_Coin.razor atoms/coffeecoin Link
Dropdown_Mainframe_Element.razor atoms/Dropdown Mainframe Element Link
Dropdown_Mainframe_Head.razor atoms/Dropdown Mainframe Head Link
Dropdown_Mainframe_Indicator.razor atoms/Dropdown Mainframe Indicator Link
Form_Label.razor atom/form-label Link
Input_Notification.razor atoms/input-notification Link
List_Item.razor atoms/list-item Link
Location_Info.razor atoms/locationinfo Link
Main_Menu_Tab_Desktop.razor atoms/main-menu-tab (Desktop) Link
Main_Menu_Tab_Mobile.razor atoms/main-menu-tab (Mobile) Link
Nav_Tab.razor atoms/nav-tabs Link
Navigation_Tab.razor atoms/navigation-tab Link
Page_Indicator.razor atoms/pageindicator Link
Profile_Pic.razor atoms/profilepic Link
Searchbar.razor atoms/searchbar Link
Searchbar_Single.razor atoms/searchbar-deprecated (Round) Link
Site_Button.razor atoms/site Link
Site_Tag.razor atoms/site-tag Link
Tab.razor atoms/tab Link
Tag.razor atoms/tag Link
Toggle.razor atoms/toggle Link
Weather_Info.razor atoms/weather-info Link
Free_Occupied_Indicator.razor atoms/free-occupied-indicator Link
Link_Mainframe_Indicator.razor atoms/mainframe-accordeon-link-indicator Link
Location_Info_Item.razor - Link
Button
Name Figma Component File
Button.razor atoms/button Link
ButtonCircleTransparent32.razor button/circle-transparent-32px Link
Form
Name Figma Component File
Form_Dropdown_Selection.razor atoms/form/dropdown Link
Form_Number_Picker.razor actionelement/numberpicker Link
Form_Text_Input.razor atoms/form/text Link

Molecules

General
Name Figma Component File
Dropdown_App_Store.razor molecules/Dropdown_App_Store Link
Dropdown_Body.razor molecules/dropdown-body Link
Navigation_Tab_Group.razor molecules/dropdown-body Link
Notification.razor molecules/notification Link
People_Info.razor molecules/people-info Link
Position_Request_Toggle.razor molecules/positionrequest-toggle Link
Selectable_Category_And_Title.razor molecules/selectable-category-and-title Link
Serp_List_Item.razor molecules/serp-list-item Link
Tabs_Wrapper.razor molecules/tabs Link
Toggle_Button.razor molecules/Toggle_Button Link
Form
Name Figma Component File
Form_Dropdown.razor molecules/form/dropdown Link
Form_Slider.razor molecules/form/slider Link
Form_Text.razor molecules/form/text Link
Form_Wrapper.razor - Link

Text

Allows formatting of text in an uniform way. E.g. making text uppercase or bold.

Name Figma Component File
Text_Regular.razor - Link
Text_Uppercase.razor - Link
Text_ExtraBold.razor - Link
Text_Display.razor - Link
Text_Bold.razor - Link

Listeners

Allows to detect user interaction on the UI. E.g. detecting swipe gestures on mobile screens.

Styles

Name Default Value
radius-button-rectangle -
radius-button-pill -
spacing-vertical-adj-text-top -

Colors

All available colors can be found below:

Black

Name Default Value
color-black-rgb 0,0,0
color-black-04 rgba(var(--color-black-rgb), 0.04)
color-black-05 rgba(var(--color-black-rgb), 0.05)
color-black-10 rgba(var(--color-black-rgb), 0.10)
color-black-15 rgba(var(--color-black-rgb), 0.15)
color-black-20 rgba(var(--color-black-rgb), 0.20)
color-black-25 rgba(var(--color-black-rgb), 0.25)
color-black-35 rgba(var(--color-black-rgb), 0.35)
color-black-50 rgba(var(--color-black-rgb), 0.50)
color-black-60 rgba(var(--color-black-rgb), 0.60)
color-black-75 rgba(var(--color-black-rgb), 0.75)
color-black rgba(var(--color-black-rgb), 1)

White

Name Default Value
color-white-rgb 255,255,255
color-white-05 rgba(var(--color-white-rgb), 0.05)
color-white-10 rgba(var(--color-white-rgb), 0.10)
color-white-15 rgba(var(--color-white-rgb), 0.15)
color-white-20 rgba(var(--color-white-rgb), 0.20)
color-white-25 rgba(var(--color-white-rgb), 0.25)
color-white-35 rgba(var(--color-white-rgb), 0.35)
color-white-50 rgba(var(--color-white-rgb), 0.50)
color-white-75 rgba(var(--color-white-rgb), 0.75)
color-white-85 rgba(var(--color-white-rgb), 0.85)
color-white-95 rgba(var(--color-white-rgb), 0.95)
color-white rgba(var(--color-white-rgb), 1)

Semantic

Name Default Value
color-semantic-text-disabled rgba(156, 156, 156)
color-semantic-text-dark rgba(42, 42, 42)
color-semantic-text-light rgba(113, 113, 113)
color-semantic-text-medium rgba(71, 71, 71)
color-semantic-stroke-error rgba(224, 0, 0)
color-semantic-stroke-active rgba(44, 124, 19)
color-semantic-stroke-light rgba(240, 240, 240)
color-semantic-stroke-default rgba(226, 226, 226)
color-semantic-stroke-hover rgba(156, 156, 156)
color-semantic-stroke-pressed rgba(71, 71, 71)
color-semantic-stroke-disabled rgba(226, 226, 226)
color-semantic-stroke-selectable rgba(184, 184, 184)
color-semantic-background-default rgba(0, 0, 0, 0)
color-semantic-background-active rgba(233, 244, 229)
color-semantic-background-disabled rgba(240, 240, 240)
color-semantic-icon-disabled rgba(156, 156, 156)
color-semantic-background-lighter-grey rgba(250, 250, 250)

Grey Primary

Name Default Value
color-grey-primary-lighter
color-grey-primary-light
color-grey-primary-mid
color-grey-primary-dark
color-grey-primary-darker-rgb
color-grey-primary-darker-85
color-grey-primary-darker

Grey Secondary

Name Default Value
color-grey-secondary-24 rgba(252, 252, 252, 1)
color-grey-secondary-25 rgba(252, 252, 252, 1)
color-grey-secondary-26 rgba(247, 247, 247, 1)
color-grey-secondary-27 rgba(245, 245, 245, 1)
color-grey-secondary-28 rgba(242, 242, 242, 1)
color-grey-secondary-29 rgba(238, 238, 238, 1)
color-grey-secondary-30 rgba(230, 230, 230, 1)
color-grey-secondary-31 rgba(221, 221, 221, 1)
color-grey-secondary-32 rgba(178, 178, 178, 1)
color-grey-secondary-33 rgba(149, 149, 149, 1)
color-grey-secondary-34 rgba(109, 109, 109, 1)
color-grey-secondary-35-rgb 68, 68, 68
color-grey-secondary-35 rgba(var(--color-grey-secondary-35), 1)
color-grey-secondary-35-70 rgba(var(--color-grey-secondary-35), 0.70)
color-grey-secondary-36 rgba(23, 23, 23, 1)

Grey (New)

Name Default Value
color-grey-200 rgba(42, 42, 42)
color-grey-750 rgba(198, 198, 198)
color-grey-900 rgba(240, 240, 240)

Signal colors

Name Default Value
color-signal-red-rgb 224, 0, 0
color-signal-red-03 rgba(var(--color-signal-red-rgb), 0.03)
color-signal-red-10 rgba(var(--color-signal-red-rgb), 0.10)
color-signal-red-15 rgba(var(--color-signal-red-rgb), 0.15)
color-signal-red-20 rgba(var(--color-signal-red-rgb), 0.20)
color-signal-red-25 rgba(var(--color-signal-red-rgb), 0.25)
color-signal-red-50 rgba(var(--color-signal-red-rgb), 0.50)
color-signal-red rgba(var(--color-signal-red-rgb), 1)
color-signal-green-rgb 0, 163, 33
color-signal-green-05 rgba(var(--color-signal-green-rgb), 0.05)
color-signal-green-10 rgba(var(--color-signal-green-rgb), 0.10)
color-signal-green-15 rgba(var(--color-signal-green-rgb), 0.15)
color-signal-green-25 rgba(var(--color-signal-green-rgb), 0.25)
color-signal-green-35 rgba(var(--color-signal-green-rgb), 0.35)
color-signal-green-50 rgba(var(--color-signal-green-rgb), 0.50)
color-signal-green rgba(var(--color-signal-green-rgb), 1)
color-signal-yellow-rgb 255, 162, 0
color-signal-yellow-10 rgba(var(--color-signal-yellow-rgb), 0.10)
color-signal-yellow rgba(var(--color-signal-yellow-rgb), 1)

Notification colors

Name Default Value
color-notification-attention-rgb 221, 119, 0
color-notification-attention-85 rgba(var(--color-notification-attention-rgb), .85)
color-notification-attention rgba(var(--color-notification-attention-rgb), 1)
color-notification-warning-rgb 221, 119, 0
color-notification-warning-85 rgba(var(--color-notification-warning-rgb), .85)
color-notification-warning rgba(var(--color-notification-warning-rgb), 1)

Active

Name Default Value
color-blue-active-rgb 0, 102, 204
color-blue-active-10 rgba(var(--color-blue-active-rgb), 0.10)
color-blue-active-20 rgba(var(--color-blue-active-rgb), 0.20)
color-blue-active-35 rgba(var(--color-blue-active-rgb), 0.30)
color-blue-active rgba(var(--color-blue-active-rgb), 1)
color-blue-active-dark rgba(0, 52, 104, 1)
color-blue-active-focus-700 rgba(113, 170, 226)

Colors

Name Default Value
color-yellow rgba(255, 207, 35, 1)
color-orange-rgb 255, 131, 40
color-orange-25 rgba(var(--color-orange-rgb), 0.25)
color-orange rgba(var(--color-orange-rgb), 1)
color-orange-popup-light rgba(255, 218, 168, 1)
color-orange-popup rgba(243, 141, 0, 1)
color-red-rgb 236, 9, 24
color-red-15 rgba(var(--color-red-rgb), 0.15)
color-red rgba(var(--color-red-rgb), 1)
color-purple rgba(171, 67, 223, 1)
color-blue-light rgba(175, 186, 218, 1)
color-blue-lighter rgba(223, 230, 251, 1)
color-blue-dark rgba(3, 27, 98, 1)
color-turquoise rgba(6, 197, 174, 1)
color-green-rgb 0, 161, 45
color-green-10 rgba(var(--color-green-rgb), 0.10)
color-green-15 rgba(var(--color-green-rgb), 0.15)
color-green-50 rgba(var(--color-green-rgb), 0.50)
color-green rgba(var(--color-green-rgb), 1)
color-infsoft rgba(227, 6, 19, 1)

Brand

Name Default Value
color-brand-primary-03 rgba(var(--color-brand-primary-rgb), 0.03)
color-brand-primary-05 rgba(var(--color-brand-primary-rgb), 0.05)
color-brand-primary-15 rgba(var(--color-brand-primary-rgb), 0.15)
color-brand-primary-25 rgba(var(--color-brand-primary-rgb), 0.25)
color-brand-primary-35 rgba(var(--color-brand-primary-rgb), 0.35)
color-brand-primary-50 rgba(var(--color-brand-primary-rgb), 0.50)
color-brand-primary-75 rgba(var(--color-brand-primary-rgb), 0.75)
color-brand-primary rgba(var(--color-brand-primary-rgb), 1)
color-brand-primary-on-dark-75 rgba(var(--color-brand-primary-on-dark-rgb), 0.75)
color-brand-primary-on-dark rgba(var(--color-brand-primary-on-dark-rgb), 1)
color-brand-primary-wcag-05 rgba(var(--color-brand-primary-wcag-rgb), 0.05)
color-brand-primary-wcag-25 rgba(var(--color-brand-primary-wcag-rgb), 0.25)
color-brand-primary-wcag-65 rgba(var(--color-brand-primary-wcag-rgb), 0.65)
color-brand-primary-wcag-85 rgba(var(--color-brand-primary-wcag-rgb), 0.85)
color-brand-primary-wcag rgba(var(--color-brand-primary-wcag-rgb), 1)
color-brand-background-1-80 rgba(var(--color-brand-background-1-rgb), 0.80)
color-brand-background-1 rgba(var(--color-brand-background-1-rgb), 1)
color-brand-background-2 rgba(var(--color-brand-background-2-rgb), 1)
color-brand-semantic-background-light rgba(var(--color-brand-semantic-background-light-rgb), 1)
color-brand-semantic-stroke-default rgba(var(--color-brand-semantic-stroke-default-rgb), 1)
color-brand-semantic-stroke-dark rgba(var(--color-brand-semantic-stroke-dark-rgb), 1)
color-brand-semantic-light rgba(var(--color-brand-semantic-light-rgb), 1)
color-brand-semantic-icon-light rgba(var(--color-brand-semantic-icon-light-rgb), 1)
color-brand-semantic-icon-dark rgba(var(--color-brand-semantic-icon-dark-rgb), 1)
color-brand-semantic-text-dark rgba(var(--color-brand-semantic-text-dark-rgb), 1)

Brand base colors, overriden per tenant

Name Default Value
color-brand-primary-rgb 57, 160, 25
color-brand-primary-on-dark-rgb 176, 217, 163
color-brand-primary-wcag-rgb 0, 89, 41
color-brand-background-1-rgb 210, 233, 203
color-brand-background-2-rgb 25, 71, 11
color-brand-semantic-stroke-default-rgb 57, 160, 25
color-brand-semantic-stroke-dark-rgb 38, 106, 16
color-brand-semantic-light-rgb 210, 233, 203
color-brand-semantic-icon-light-rgb 210, 233, 203
color-brand-semantic-icon-dark-rgb 25, 71, 11
color-brand-semantic-text-dark-rgb 38, 106, 16
color-brand-semantic-background-light-rgb 227, 233, 249

Setup

Add this at the very end of MainLayout:

<UIComponents />

Add this to Program.cs:

using Infsoft.WPE.App.UIComponents;
...
builder.Services.AddUIComponents();
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Infsoft.WPE.App.UIComponents:

Package Downloads
Infsoft.WPE.App.Authentication.Base

Base authentication library used in platform dependent auth libraries (Infsoft.WPE.App.Authentication.Web and Infsoft.WPE.App.Authentication.Maui) for infsoft's Workplace Experience application

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.0.104 37 11/15/2024
0.0.103 35 11/15/2024
0.0.102 29 11/15/2024
0.0.101 34 11/15/2024
0.0.100 33 11/15/2024
0.0.99 44 11/14/2024
0.0.98 53 11/14/2024
0.0.97 31 11/14/2024
0.0.96 31 11/14/2024
0.0.95 33 11/14/2024
0.0.94 90 11/12/2024
0.0.93 72 11/12/2024
0.0.92 67 11/12/2024
0.0.91 62 11/12/2024
0.0.90 91 11/11/2024
0.0.89 70 11/11/2024
0.0.88 68 11/11/2024
0.0.87 70 11/11/2024
0.0.86 78 11/11/2024
0.0.85 67 11/11/2024
0.0.84 94 11/9/2024
0.0.83 78 11/9/2024
0.0.82 116 11/8/2024
0.0.80 66 11/8/2024
0.0.79 79 11/8/2024
0.0.78 74 11/8/2024
0.0.77 78 11/8/2024
0.0.76 78 11/8/2024
0.0.75 70 11/8/2024
0.0.74 71 11/8/2024
0.0.73 70 11/8/2024
0.0.72 64 11/8/2024
0.0.71 63 11/8/2024
0.0.70 86 11/7/2024
0.0.69 67 11/7/2024
0.0.68 80 11/7/2024
0.0.67 64 11/7/2024
0.0.66 72 11/7/2024
0.0.65 80 11/7/2024
0.0.64 92 11/6/2024
0.0.63 71 11/6/2024
0.0.61 62 11/6/2024
0.0.60 62 11/6/2024
0.0.59 76 11/4/2024
0.0.58 76 11/1/2024
0.0.57 83 10/31/2024
0.0.56 88 10/31/2024
0.0.55 66 10/31/2024
0.0.54 132 10/30/2024
0.0.53 76 10/29/2024
0.0.52 89 10/29/2024
0.0.51 163 10/26/2024
0.0.50 83 10/26/2024
0.0.49 93 10/25/2024
0.0.48 69 10/25/2024
0.0.47 93 10/25/2024
0.0.46 70 10/25/2024
0.0.45 129 10/24/2024
0.0.44 64 10/24/2024
0.0.43 76 10/24/2024
0.0.42 108 10/23/2024
0.0.41 121 10/22/2024
0.0.40 170 10/18/2024
0.0.39 124 10/18/2024
0.0.38 116 10/18/2024
0.0.37 137 10/17/2024
0.0.36 97 10/17/2024
0.0.35 101 10/16/2024
0.0.34 82 10/16/2024
0.0.33 85 10/16/2024
0.0.32 78 10/15/2024
0.0.31 78 10/15/2024
0.0.30 67 10/15/2024
0.0.29 117 10/11/2024
0.0.28 148 10/11/2024
0.0.27 85 10/10/2024
0.0.26 78 10/10/2024
0.0.25 131 10/7/2024
0.0.24 121 10/2/2024
0.0.22 93 10/1/2024
0.0.21 220 9/27/2024
0.0.20 144 9/27/2024
0.0.19 118 9/26/2024
0.0.18 94 9/26/2024
0.0.17 154 9/25/2024
0.0.16 86 9/25/2024
0.0.15 83 9/24/2024
0.0.14 86 9/24/2024
0.0.13 109 9/24/2024
0.0.12 87 9/24/2024
0.0.11 93 9/23/2024
0.0.10 89 9/23/2024
0.0.9 86 9/23/2024
0.0.8 107 9/20/2024
0.0.7 92 9/19/2024
0.0.6 81 9/19/2024
0.0.5 97 9/18/2024
0.0.4 93 9/18/2024
0.0.3 89 9/18/2024
0.0.2 92 9/18/2024