Howard Richards conficient

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.d0 { width: 100%; padding:0; margin:0 }

## tinyMCE.html
<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
  <textarea>Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>

## AppState.cs
using FlightFinder.Shared;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;

namespace FlightFinder.Client.Services
{
    public class AppState

## GreyOutZone.razor
@* creates a container component that greys-out the content when the `IsGreyedOut` parameter is set to true *@
<div style="@(IsGreyedOut ? greyout : null)">
    <div style="@cover"></div>
    @ChildContent
</div>

@code {
  const string greyout = "position: absolute; width: 100%; min-height: 100%;";
  const string cover = "background: rgba(150, 150, 150, 0.5); position: absolute; width: 100%;  height: 100%; z-index: 1;";


## Test.cs
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System;
using System.Collections.Generic;

namespace Tests
{
    [TestClass]
    public class Test
    {
        [TestMethod]

## Loading.razor
/* shows a loading gif/text if a value is null */
@if (Value == null)
{
    <div><img src="/img/SmallLoader.gif" alt="loading" /> Loading</div>
}
else
{
    @ChildContent
}
@code {

## SizeCheck.razor
@* see DevOnly at https://gist.github.com/conficient/aca15e92931a15d76047cee598df2e0c *@
@* a small coloured badge appears on the top right of the screen to show the current Bootstrap 4.x
   screen breakpoint (see https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
   This component can be put into your `MainLayout.razor` template so it appears on every page.
   It's wrapped in a `<DevOnly>` component, so will only render in Debug mode. In production it won't appear.
*@
<DevOnly>
    <div style="position:absolute; top: 10px; right: 10px;">
        <span class="badge badge-primary d-none d-xl-inline">xl</span>
        <span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span>

## Counter.razor
@page "/counter"
@inject CounterService counterService
@implements IDisposable

<h1>Counter</h1>

<p>Current count: @counterService.Count</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

## NotNull.razor
@if (Value != null)
{
    @ChildContent
}
@code
{
    /* sample usage
     * <NotNull Value="yourValue">
     *   // use value
     * </NotNull>

## ICalendar.razor
@using Ical.Net
@using Ical.Net.Serialization
@* requires Ical.Net library from NUGET *@
@if(Calendar != null)
{
    <a href=@dataUrl download=@Filename >@ChildContent</a>
}
@code
{
    [Parameter] public Calendar Calendar { get; set; }
	/**
	* The first commented line is your dabblet’s title
	*/
	body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}

	.d0 { width: 100%; padding:0; margin:0 }
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
	<script>tinymce.init({ selector:'textarea' });</script>
	</head>
	<body>
	<textarea>Easy (and free!) You should check out our premium features.</textarea>
	</body>
	</html>
	using FlightFinder.Shared;
	using Microsoft.AspNetCore.Components;
	using System;
	using System.Collections.Generic;
	using System.Net.Http;
	using System.Threading.Tasks;

	namespace FlightFinder.Client.Services
	{
	public class AppState
	@* creates a container component that greys-out the content when the `IsGreyedOut` parameter is set to true *@
	<div style="@(IsGreyedOut ? greyout : null)">
	<div style="@cover"></div>
	@ChildContent
	</div>

	@code {
	const string greyout = "position: absolute; width: 100%; min-height: 100%;";
	const string cover = "background: rgba(150, 150, 150, 0.5); position: absolute; width: 100%; height: 100%; z-index: 1;";
	using Microsoft.VisualStudio.TestTools.UnitTesting;
	using System;
	using System.Collections.Generic;

	namespace Tests
	{
	[TestClass]
	public class Test
	{
	[TestMethod]
	/* shows a loading gif/text if a value is null */
	@if (Value == null)
	{
	<div><img src="/img/SmallLoader.gif" alt="loading" /> Loading</div>
	}
	else
	{
	@ChildContent
	}
	@code {
	@* see DevOnly at https://gist.github.com/conficient/aca15e92931a15d76047cee598df2e0c *@
	@* a small coloured badge appears on the top right of the screen to show the current Bootstrap 4.x
	screen breakpoint (see https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
	This component can be put into your `MainLayout.razor` template so it appears on every page.
	It's wrapped in a `<DevOnly>` component, so will only render in Debug mode. In production it won't appear.
	*@
	<DevOnly>
	<div style="position:absolute; top: 10px; right: 10px;">
	<span class="badge badge-primary d-none d-xl-inline">xl</span>
	<span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span>
	@page "/counter"
	@inject CounterService counterService
	@implements IDisposable

	<h1>Counter</h1>

	<p>Current count: @counterService.Count</p>

	<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
	@if (Value != null)
	{
	@ChildContent
	}
	@code
	{
	/* sample usage
	* <NotNull Value="yourValue">
	* // use value
	* </NotNull>
	@using Ical.Net
	@using Ical.Net.Serialization
	@* requires Ical.Net library from NUGET *@
	@if(Calendar != null)
	{
	<a href=@dataUrl download=@Filename >@ChildContent</a>
	}
	@code
	{
	[Parameter] public Calendar Calendar { get; set; }