3 changed files
WPE.App.Shared.BaseComponents | ||
Pages/ActionElement/Searchbar | ||
SearchbarPeople.razor + | ||
SearchbarPeople.razor.css + | ||
WPE.App.Shared.BaseComponents.csproj | ||
SearchbarPeople.razor
/WPE.App.Shared.BaseComponents/Pages/ActionElement/Searchbar/SearchbarPeople.razor+48/WPE.App.Shared.BaseComponents/Pages/ActionElement/Searchbar/SearchbarPeople.razor
Add comment 1 Plus @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Buttons
Add comment 2 Plus
Add comment 3 Plus @{
Add comment 4 Plus string barClass = "searchbar";
Add comment 5 Plus barClass += Empty ? " empty" : "";
Add comment 6 Plus }
Add comment 7 Plus
Add comment 8 Plus @* Figma Component: actionelement/searchbar/people *@
Add comment 9 Plus <div class="@barClass">
Add comment 10 Plus <i class="search-icon icon-search-16" />
Add comment 11 Plus <input placeholder="@Placeholder" value="@Value" @oninput="OnInput" />
Add comment 12 Plus
Add comment 13 Plus <div class="clear-wrapper" @onclick:stopPropagation="true" @onclick:preventDefault="true">
Add comment 14 Plus <ButtonCircleTransparent32 Icon="cancel-16" Click="() => SetValue()" />
Add comment 15 Plus </div>
Add comment 16 Plus </div>
Add comment 17 Plus
Add comment 18 Plus @code {
Add comment 19 Plus [Parameter]
Add comment 20 Plus public string Placeholder { get; set; } = string.Empty;
Add comment 21 Plus
Add comment 22 Plus [Parameter]
Add comment 23 Plus public string Value { get; set; } = string.Empty;
Add comment 24 Plus
Add comment 25 Plus [Parameter]
Add comment 26 Plus public EventCallback<string> ValueChanged { get; set; }
Add comment 27 Plus
Add comment 28 Plus private bool Empty => String.IsNullOrEmpty(Value);
Add comment 29 Plus
Add comment 30 Plus private void OnInput(ChangeEventArgs args)
Add comment 31 Plus {
Add comment 32 Plus if (args == null) return;
Add comment 33 Plus
Add comment 34 Plus string? val = args?.Value?.ToString();
Add comment 35 Plus
Add comment 36 Plus if (val != null)
Add comment 37 Plus {
Add comment 38 Plus SetValue(val);
Add comment 39 Plus }
Add comment 40 Plus }
Add comment 41 Plus
Add comment 42 Plus private void SetValue(string value = "")
Add comment 43 Plus {
Add comment 44 Plus Value = value;
Add comment 45 Plus _ = ValueChanged.InvokeAsync(Value);
Add comment 46 Plus }
Add comment 47 Plus }
Add comment 48 Plus
SearchbarPeople.razor.css
/WPE.App.Shared.BaseComponents/Pages/ActionElement/Searchbar/SearchbarPeople.razor.css+67/WPE.App.Shared.BaseComponents/Pages/ActionElement/Searchbar/SearchbarPeople.razor.css
Add comment 1 Plus .searchbar {
Add comment 2 Plus position: relative;
Add comment 3 Plus width: 100%;
Add comment 4 Plus display: flex;
Add comment 5 Plus height: 48px;
Add comment 6 Plus padding: 0px 12px 0px 16px;
Add comment 7 Plus align-items: center;
Add comment 8 Plus flex-shrink: 0;
Add comment 9 Plus gap: 12px;
Add comment 10 Plus border-radius: 24px;
Add comment 11 Plus background: #FFF;
Add comment 12 Plus box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
Add comment 13 Plus border: 1px solid transparent;
Add comment 14 Plus transition: .2s;
Add comment 15 Plus }
Add comment 16 Plus
Add comment 17 Plus .searchbar .search-icon {
Add comment 18 Plus font-size: 16px;
Add comment 19 Plus color: var(--primary);
Add comment 20 Plus }
Add comment 21 Plus
Add comment 22 Plus .searchbar input {
Add comment 23 Plus position: relative;
Add comment 24 Plus flex: 1;
Add comment 25 Plus font-size: 16px;
Add comment 26 Plus font-weight: 400;
Add comment 27 Plus line-height: 24px;
Add comment 28 Plus color: #333;
Add comment 29 Plus background: none;
Add comment 30 Plus }
Add comment 31 Plus
Add comment 32 Plus .searchbar input::placeholder {
Add comment 33 Plus opacity: 0.35;
Add comment 34 Plus }
Add comment 35 Plus
Add comment 36 Plus .searchbar input::-ms-input-placeholder {
Add comment 37 Plus opacity: 0.35;
Add comment 38 Plus }
Add comment 39 Plus
Add comment 40 Plus .searchbar .clear-wrapper {
Add comment 41 Plus visibility: visible;
Add comment 42 Plus transition: inherit;
Add comment 43 Plus opacity: 1;
Add comment 44 Plus }
Add comment 45 Plus
Add comment 46 Plus .searchbar.empty .clear-wrapper {
Add comment 47 Plus visibility: hidden;
Add comment 48 Plus opacity: 0;
Add comment 49 Plus }
Add comment 50 Plus
Add comment 51 Plus .searchbar:active {
Add comment 52 Plus transition: 0s;
Add comment 53 Plus }
Add comment 54 Plus
Add comment 55 Plus .searchbar:hover {
Add comment 56 Plus border: 1px solid rgba(var(--primary-wcag-rgb), .65);
Add comment 57 Plus }
Add comment 58 Plus
Add comment 59 Plus .searchbar:active {
Add comment 60 Plus border: 1px solid var(--primaryWcag);
Add comment 61 Plus background: #EEE;
Add comment 62 Plus }
Add comment 63 Plus
Add comment 64 Plus .searchbar:focus-within {
Add comment 65 Plus border: 2px solid var(--primaryWcag);
Add comment 66 Plus }
Add comment 67 Plus
WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj-1+1/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj
Add comment 15 <PackageIcon>icon.png</PackageIcon>
Add comment 16 <PackageReadmeFile>ReadMe.md</PackageReadmeFile>
Add comment 17 <PackageTags>WPE;Workplace Experience;Blazor;MAUI;infsoft</PackageTags>
Add comment 18 Minus <Version>0.0.15</Version>
Add comment 18 Plus <Version>0.0.16</Version>
Add comment 19 <WarningsAsErrors>RZ10012</WarningsAsErrors>
Add comment 20 </PropertyGroup>
Add comment 21