Infsoft.WPE.App.UIComponents 0.0.14

Prefix Reserved

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.14

NuGet\Install-Package Infsoft.WPE.App.UIComponents -Version 0.0.14

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.14" />

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.14

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: Infsoft.WPE.App.UIComponents, 0.0.14"

#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.14

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

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

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 subscribed to receive information about mouse actions	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

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

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)

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

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-stroke-error	rgba(224, 0, 0)
color-semantic-stroke-active	rgba(44, 124, 19)
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-selectable	rgba(184, 184, 184)
color-semantic-background-active	rgba(233, 244, 229)
color-semantic-background-disabled	rgba(240, 240, 240)
color-semantic-background-default	rgba(255, 255, 255)
color-semantic-icon-disabled	rgba(156, 156, 156)

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)

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-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-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-dark-rgb	25, 71, 11
color-brand-semantic-text-dark-rgb	38, 106, 16

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.

net8.0
- Infsoft.WPE.App.Analytics (>= 0.1.7)
- Infsoft.WPE.App.Shared.Utils (>= 0.0.11)
- Microsoft.AspNetCore.Components.Web (>= 8.0.8)

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	3.1K

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last updated
0.0.59	28	11/4/2024
0.0.58	41	11/1/2024
0.0.57	51	10/31/2024
0.0.56	57	10/31/2024
0.0.55	34	10/31/2024
0.0.54	99	10/30/2024
0.0.53	73	10/29/2024
0.0.52	86	10/29/2024
0.0.51	160	10/26/2024
0.0.50	82	10/26/2024
0.0.49	92	10/25/2024
0.0.48	68	10/25/2024
0.0.47	92	10/25/2024
0.0.46	69	10/25/2024
0.0.45	128	10/24/2024
0.0.44	63	10/24/2024
0.0.43	75	10/24/2024
0.0.42	107	10/23/2024
0.0.41	120	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	136	10/17/2024
0.0.36	97	10/17/2024
0.0.35	100	10/16/2024
0.0.34	81	10/16/2024
0.0.33	84	10/16/2024
0.0.32	78	10/15/2024
0.0.31	77	10/15/2024
0.0.30	67	10/15/2024
0.0.29	116	10/11/2024
0.0.28	147	10/11/2024
0.0.27	84	10/10/2024
0.0.26	77	10/10/2024
0.0.25	130	10/7/2024
0.0.24	120	10/2/2024
0.0.22	93	10/1/2024
0.0.21	219	9/27/2024
0.0.20	142	9/27/2024
0.0.19	116	9/26/2024
0.0.18	92	9/26/2024
0.0.17	152	9/25/2024
0.0.16	84	9/25/2024
0.0.15	82	9/24/2024
0.0.14	86	9/24/2024
0.0.13	108	9/24/2024
0.0.12	84	9/24/2024
0.0.11	88	9/23/2024
0.0.10	87	9/23/2024
0.0.9	83	9/23/2024
0.0.8	104	9/20/2024
0.0.7	89	9/19/2024
0.0.6	79	9/19/2024
0.0.5	95	9/18/2024
0.0.4	89	9/18/2024
0.0.3	87	9/18/2024
0.0.2	90	9/18/2024

Infsoft.WPE.App.UIComponents 0.0.14

Workplace Experience (WPE 3.0) Components Library for UI

Managers

Components

Actions

Listeners

Ions

Atoms

General

Button

Form

Molecules

General

Form

Text

Listeners

Styles

Colors

Black

White

Grey Primary

Semantic

Grey Secondary

Signal colors

Notification colors

Active

Colors

Brand

Brand base colors, overriden per tenant

Setup

net8.0

NuGet packages (1)

GitHub repositories